結(jié)合設(shè)計(jì)經(jīng)驗(yàn)與營銷實(shí)踐,提供有價值的互聯(lián)網(wǎng)資訊
發(fā)布日期:2018-03-18瀏覽次數(shù):1319 來源:福州網(wǎng)站建設(shè)
你可能說——“我們用的都是彩色的,不是黑白的”——別著急,下面會講到。因?yàn)樗鼈円部梢宰優(yōu)椴噬摹?/p>
黑白的也好,彩色的也罷,如果用傳統(tǒng)的“css + 圖片”的方式來制作這些icon,我估計(jì)你至少得雇傭一個專業(yè)的設(shè)計(jì)師吧。一般的程序猿,包括前端程序猿,估計(jì)只能去搜索了,不會自己拿ps畫。例如,我之前經(jīng)常去一個叫做“懶人圖庫”的網(wǎng)站去找資源,現(xiàn)在那個網(wǎng)站還存在。
但是問題又來了,如果你搜索來的是黑白的,現(xiàn)在也用黑白的,后期網(wǎng)站變化主題怎么辦?你搜出來的是16 * 16的,要有個頁面需要 32 * 32的怎么辦?如果沿著這個方向考慮,你會發(fā)現(xiàn),自己將在這上面耗費(fèi)大量資源和精力。
但是如果我告訴你,有一個東西,它已經(jīng)為你準(zhǔn)備了將近500個常用icon圖標(biāo)(還在不斷更新),能大能小,能隨便修改顏色,完全開源,完全免費(fèi),你會不會心動?如果你非常著急,先去百度一下“font-awesome”,再來繼續(xù)讀文章不遲。
2.1 下載
去http://www.thinkcmf.com/下載,解壓之后,應(yīng)該能看到“css”和“font”兩個文件夾。css文件夾中存放著css文檔,font文件夾中存放在著適用于不同瀏覽器的字體文件。其中,css文件夾中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 兩個文檔,其他的可以刪掉。結(jié)構(gòu)應(yīng)該如下:
2.2 簡單應(yīng)用
將整理好的文件夾加入到你的網(wǎng)站,新建一個測試頁面 demo.html,將css文件夾中的兩個css文件,引入到頁面。
如上圖,如果是IE瀏覽器,需要引入 font-awesome-ie7.min.css ,因?yàn)閒ontAwesome支持IE7+瀏覽器的。(唉。。為何不再往前延伸到支持IE6呢。。。)
引用CSS文件之后,接下來就可以使用圖標(biāo)了。例如,我要在頁面中顯示一個“鏈接”的圖標(biāo),我可以這么寫:
此時頁面將顯示:
顯示是顯示出來了,那么對應(yīng)鏈接的這個css類“fa-link”我是從哪里找來的呢?
答案非常簡單!進(jìn)入官網(wǎng)的icon頁面,里面有所有的icon的css類,就可以找到你想要的那個圖標(biāo)的css類了。
(注意,在“fa-link”前面還要加入一個“fa”類,例如 )
2.3 設(shè)置大小和顏色
學(xué)會了以上的簡單使用,設(shè)置顏色和大小非常簡單,只要你會用css設(shè)置文字的顏色和大小就行。直接看代碼:
復(fù)制代碼
復(fù)制代碼 得出的結(jié)果就是:
so easy 吧!這樣看來它確實(shí)是個好東西。
最后總結(jié),看起來阿里巴巴圖庫比較試合國人