綱要
Fontastic是個線上圖示轉字體服務的網站,可以上傳自己製作的svg圖檔並管理集合。
也提供轉換成CSS樣式以前的命名模式編輯,打包下載時可以直接跟著範例網頁以class的方式或者data-attribute調用圖示。
繪製icon的軟體,只要是能匯出svg格式的都可以,推薦Adobe Illustrator和Sketch等。
但要將icon轉換成字體,一定會有些固定的細節需要注意:
・必須是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;
}
還記不記得之前提過,當你的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=""></div>
<p>data attribute star</p>
</li>
</ul>
我們之所以使用iconFonts的最大理由,就是考慮每個User的網速,和減少對Server端存取的次數,這種字體檔的體積也比一般英數字的種類來的更小,畢竟對於User來說,能縮短等待時間還是有加分的。
Scss
iconFonts
fontastic