---
title: '2020/03/04 Sass/Scss 教學筆記: 如何製作 iconFonts'
disqus: hackmd
---

2020/03/04 Sass/Scss 教學筆記: 如何製作 iconFonts
===

綱要

[TOC]

註冊Fontastic
===


http://app.fontastic.me/

Fontastic是個線上圖示轉字體服務的網站，可以上傳自己製作的svg圖檔並管理集合。
也提供轉換成CSS樣式以前的命名模式編輯，打包下載時可以直接跟著範例網頁以class的方式或者data-attribute調用圖示。

---

關於製作 Font SVG 這檔事的坑
===

繪製icon的軟體，只要是能匯出svg格式的都可以，推薦Adobe Illustrator和Sketch等。
但要將icon轉換成字體，一定會有些固定的細節需要注意：

:::info
・必須是RGB純黑色#000000，且不能有遮色片
・必須對齊中心點以免日後發生需要額外寫 padding 的慘劇
・必須將所有外觀線條、字體轉外框，形狀也要合併為單一圖層整體色塊
:::


假如不小心手殘或手賤亂調色票、沒轉外框、沒合併形狀，轉出SVG上傳到 Fontastic 就會發生這種恐怖的事情：


製作方式
===


下載之前可以在CUSTOMIZE編輯class name和使用`data-attribute`時的MAPPING字元，這邊推薦大家切換成PUA模式。


選擇PUBLISH後可以預覽一下class name和MAPPING：


下載解壓縮後會看見一份CSS檔和一個html、以及一個fonts目錄。


直接將CSS的內容複製到新的Scss檔，接下來我們就可以在網頁中使用它們：

@charset "UTF-8";

@font-face {
  font-family: "iconfonts";
  src:url("fonts/iconfonts.eot");
  src:url("fonts/iconfonts.eot?#iefix") format("embedded-opentype"),
    url("fonts/iconfonts.woff") format("woff"),
    url("fonts/iconfonts.ttf") format("truetype"),
    url("fonts/iconfonts.svg#iconfonts") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "iconfonts" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  /* speak是設置聲音輸出屬性，這邊其實不需要 */
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="app-"]:before,
[class*=" app-"]:before {
  font-family: "iconfonts" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 假如你增加了icon的數量，就必須重新再下載一次，而這裡的編號也會跟著異動 */

.icons-key:before {
  content: "\61";
}
.icons-earphone:before {
  content: "\62";
}
.icons-heart:before {
  content: "\63";
}
.icons-dialogue:before {
  content: "\64";
}
.icons-music:before {
  content: "\65";
}
.icons-lock:before {
  content: "\66";
}
.icons-node:before {
  content: "\67";
}
.icons-piechart:before {
  content: "\68";
}
.icons-search:before {
  content: "\69";
}
.icons-speaker:before {
  content: "\6a";
}
.icons-star:before {
  content: "\6b";
}

/* variable.scss */
/* 還可以替這些icon染色 */

$iconFontsColors: 'info', 'success', 'error', 'warning';

@mixin iconFontsColor($currentColor) {
  [class^="app-"]:before,
  [class*=" app-"]:before {
    @if $currentColor == 'info' {
      color: #0066FF;
    } @else if $currentColor == 'success' {
      color: #FFEE99;
    } @else if $currentColor == 'error' {
      color: #FF3333;
    } @else if $currentColor == 'warning' {
      color: #77FF00;
    }
  }
}

.tabs {
  .button {
    /* 調用時根據'info', 'success', 'error', 'warning' 帶出不同結果 */
    @include iconFontsColor('info');
  }
}

/* 編譯後的CSS */
/* iconFontsColor指定'info'的結果 */
.tabs .button [class^=app-]:before,
.tabs .button [class*=" app-"]:before {
  color: #0066FF;
}

/* variable.scss */
/* 用data-attribute的染色寫法 */
$iconFontsColors: 'info', 'success', 'error', 'warning';

@each $currentColor in $iconFontsColors {
  .tabs {
    &[data-iconColor=#{$currentColor}]{
      .button {
        &[data-icon]:before {
          @if $currentColor == 'info' {
            color: #0066FF;
          } @else if $currentColor == 'success' {
            color: #FFEE99;
          } @else if $currentColor == 'error' {
            color: #FF3333;
          } @else if $currentColor == 'warning' {
            color: #77FF00;
          }
        }
      }
    }
  }
}

/* 編譯後的CSS */
.tabs[data-iconColor=info] .button[data-icon]:before {
  color: #0066FF;
}

.tabs[data-iconColor=success] .button[data-icon]:before {
  color: #FFEE99;
}

.tabs[data-iconColor=error] .button[data-icon]:before {
  color: #FF3333;
}

.tabs[data-iconColor=warning] .button[data-icon]:before {
  color: #77FF00;
}

:::info
還記不記得之前提過，當你的style class name命名是一個系列，比如「block-container」、「block-row」，我們就可以利用比對選擇器處理：
[class^="block-"] >> 表示匹配開頭有"block-"的所有class name
[class*=" block-"] >> 表示子元素有"block-"的所有class name
:::

<ul>
  <li>
    <!-- 調用的方法也非常直覺，可以用class name的方式，也能用data-attribute -->
    <div class="icon app-star"></div>
    <p>class key</p>
  </li>
  <li>
    <div class="icon" data-icon="&#xe00c;"></div>
    <p>data attribute star</p>
  </li>
</ul>

---

本日後記
===

我們之所以使用iconFonts的最大理由，就是考慮每個User的網速，和減少對Server端存取的次數，這種字體檔的體積也比一般英數字的種類來的更小，畢竟對於User來說，能縮短等待時間還是有加分的。

---

###### tags: `Scss` `iconFonts` `fontastic`