iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
3

自從寫了一週文章,深深發覺要當一個部落客真是不簡單!
每天被時間追著跑,我心臟又不大顆...完全不敢拖超過11點O_O
更深深覺得拿時程壓榨工程師很壞!!(為什麼會牽到這個,咦?)

但說真的大部分都是聽到規劃時間很長,給設計和工程的時間卻很短...這個寫下去大概有八百萬字的篇幅外加滿滿負能量(絕對不是在抱怨,我覺得一切都是挑戰嗚嗚嗚!!)
...我們還是來說點正經事好了!!

/images/emoticon/emoticon10.gif


上一篇我們提到了 icon font ,今天來分享我主要使用的兩套(fontawesomeMaterial Design icons)套用到版面裡的方式~


照官方引導加載你要的icon font的文件

這邊值得注意的點是,曾經遇到的專案中使用了外部連結來作加載,結果遇到官方改版或是伺服器無回的狀況,網站就一起掛了...
所以使用時可以稍微思考一下不同方式引入的優劣,不同的專案(例如短期活動或是長期官方),依照不同的因素,選擇方式有可能會不一樣!

記得要跟工程師溝通看看~相信他們會給出很棒的意見!

一般使用方式

因為我沒有app的開發經驗,所以這邊以web為主要介紹對象,如果你身邊有app工程師,就去問一下吧!他們會很樂意教你的!

這兩套都是使用<i>標籤作為頁面上的引用,但稍微有一點點不同!

font awesome的使用方式:

<i class="fas fa-ad"></i>

material icon的使用方式:

<i class="material-icons">face</i>

可以看到兩個都要帶入固定的class名稱fasmaterial-icons
不過在font awesome中,該icon的名字是寫在class name裡,material icon則是寫在首尾標籤的中間!

偽元素使用方式

在頁面上我們經常會使用到偽元素去做出更豐富的變化!
不過當偽元素要使用的是icon font的時候,會和平常我們熟悉的稍微有點不同!

.font awesome

font awesome的使用方式:(版本4)

::before{
    content:"\要使用的font icon編號";
    font-family:"FontAwesome";
}

點入要使用的icon,就能在次標題看到屬於他的編號!(記得加斜線\喔)


2018.11.13補充:(感謝赤木大大提供)
在FontAwesome版本4中確實可以依照上述這樣寫~
但在版本5中,除了font-familly之外,還要加上font-weight這個屬性,才可以顯示對應的icon
font awesome的使用方式:(版本5)

::before{
    content:"\要使用的font icon編號";
    font-family:"Font Awesome 5 Free";
    font-weight: 900;
}

如何知道版本?

打開CSS檔案
版本4:在CSS檔案最上面,就可以看到
版本5:在CSS檔案裡,拉到最下面的就可以看到


.material icon

material icon的使用方式:

::before{
    content:"要使用的font icon名稱";
    font-family:"Material Icons";
}

(以上::before可以自己替換成::after,一切看你的需求~)


最大的不同就是一個是使用「編號」,一個是直接使用「名稱」。
相同的地方是要記得給他font-family,因為他已經文字化了,沒有指定字型的話他是無法顯示出來的!

我用codepen寫了範例,有興趣可以自己進去看看喔!

看不懂?那就留言問我,或是~~ 問你家可愛的工程師 !!

下次見喔~(還活著的話。)/images/emoticon/emoticon08.gif


上一篇
與工程師的協作之路-icon篇(上)
下一篇
與工程師的協作之路-Functional map 與 UI flow
系列文
學什麼就寫什麼,知道什麼就分享什麼31

2 則留言

1
gatesakagi
iT邦新手 4 級 ‧ 2018-10-25 08:14:13

關於FontAwesome的Font Family名稱,我補充一下,
版本4 => font-family: 'FontAwesome';
版本5 => 除了font-familly之外,還要加上font-weight這個屬性,才可以顯示對應的icon。
font-family: "Font Awesome 5 Free";
font-weight: 900;

要怎麼知道呢? 可以去看它們對應的FontAwesome的CSS檔案 (
版本4 => 在CSS檔案裡,最上面的就可以看到
版本5 => 在CSS檔案裡,拉到最下面的就可以看到

供參。

港謝大大~~~又學到新東西了!
再找時間補上!

已更新~感謝大大~/images/emoticon/emoticon41.gif

0
darwin0616
iT邦新手 2 級 ‧ 2018-10-25 09:14:02

感覺用JS Bin的越來越少了...
最近看到的鐵人文也都推薦codepen。

看更多先前的回應...收起先前的回應...

選擇自己用得順手的就OK啦!

對Java Programmer 來說 IntellJ 最順手,幾乎是最強 IDE,連Android Studio 都是用它的自由套件模組改版!/images/emoticon/emoticon12.gif

/images/emoticon/emoticon41.gif雖然...其實我沒有聽過XD
跟你共事一定也可以學到很多東西~~

這要看顏值緣分!
沒有啦!美工不是我的專長,我只是覺得你的文章寫得很真實才訂閱的!
還有19天加油吧!/images/emoticon/emoticon29.gif

/images/emoticon/emoticon20.gif超累的QQ感謝支持~

我要留言

立即登入留言