資訊專欄INFORMATION COLUMN
摘要：和元素廣泛用于圖標(biāo)?？梢灾苯訉?duì)圖標(biāo)的屬性進(jìn)行更改，如圖標(biāo)的顏色大小，并且可以組合不同的圖標(biāo)形成所需的圖標(biāo)等。執(zhí)行以上步驟，若是沒有圖標(biāo)顯示，可以打開，檢查字體庫，即引入文件的路徑是否正確。
在前端開發(fā)中，許多新手常會(huì)遇見一個(gè)問題，參考的網(wǎng)頁上有類似下圖的圖標(biāo)，但在資源里卻找不到對(duì)應(yīng)的文件，這是因?yàn)檫@些網(wǎng)頁使用了圖標(biāo)庫。這里介紹一種常見的圖標(biāo)庫——FontAwesome的使用。
1.登錄Font Awesome官網(wǎng)，下載Font Awesome安裝包，最好下載最新版本的，因?yàn)樽钚掳姹局械母碌淖訄D圖標(biāo)相對(duì)于老版本數(shù)量比較全面
附：Font Awesome官網(wǎng)
http://fontawesome.dashgame.com/
2.下載好壓縮包后，點(diǎn)擊文件夾，找到CSS文件夾里面的font-awesome.css或者font-awesome.min.css（表示壓縮過的）復(fù)制到自己項(xiàng)目里面的CSS文件夾中，并把安裝包文件夾中的fonts文件夾整個(gè)文件夾復(fù)制到自己項(xiàng)目中。
3.打開HTML頁面，在head頭部中引入font-awesome.css。
當(dāng)然了，如果沒有下載安裝包的，可以引入在線css。
比如：
4.圖標(biāo)的引用：font-awesome圖標(biāo)可以任何一個(gè)地方引用，只要在該元素的類中加入前綴fa，在加入對(duì)應(yīng)的圖標(biāo)名稱。不知道圖標(biāo)的名稱，可以在官網(wǎng)中找到對(duì)應(yīng)的圖標(biāo)，即可以找到對(duì)應(yīng)的圖標(biāo)名稱。
、
注：Font Awesome 設(shè)計(jì)為與內(nèi)聯(lián)元素一起使用。 和 元素廣泛用于圖標(biāo)。
5.可以直接對(duì)圖標(biāo)的屬性進(jìn)行更改，如圖標(biāo)的顏色、大小，并且可以組合不同的圖標(biāo)形成所需的圖標(biāo)等。
6.執(zhí)行以上步驟，若是沒有圖標(biāo)顯示，可以打開font-awesome.css，檢查字體庫，即引入fonts文件的路徑是否正確。
7.注意事項(xiàng)：引用圖標(biāo)時(shí)，一定要在class類中引入fa，然后在添加圖標(biāo)的名稱
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1056.html
摘要：自己制作字體圖標(biāo)的時(shí)候有需要注意這些阿里圖標(biāo)庫的圖標(biāo)多，免費(fèi)但是編輯器不如好用。建議設(shè)計(jì)師對(duì)于一些常用圖標(biāo)直接去阿里圖標(biāo)庫找，下載文件即可。 優(yōu)點(diǎn) 下面的簡介來自，著名字體圖標(biāo)庫Font Awesome的首頁，http://fontawesome.io： Font Awesome gives you scalable vector icons that can instantly b...
摘要：那么，在我們當(dāng)下的前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。 沒錯(cuò)，從 Web 誕生的那天開始，圖標(biāo)就成為視覺層面不可或缺的一個(gè)元素，在一個(gè) Web 頁面中，...
摘要：那么，在我們當(dāng)下的前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。 沒錯(cuò)，從 Web 誕生的那天開始，圖標(biāo)就成為視覺層面不可或缺的一個(gè)元素，在一個(gè) Web 頁面中，...
摘要：網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會(huì)顯得非常簡陋。直接看代碼鏈接鏈接鏈接鏈接得出的結(jié)果就是其他應(yīng)用還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度浮動(dòng)反轉(zhuǎn)旋轉(zhuǎn)疊加圖標(biāo)等。 引言 奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過CSS可以任意控制所有圖標(biāo)的大小 ，顏色，陰影。 網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)...
摘要：文中的一些方法來源于我的有出售請(qǐng)大家自行拷貝粘貼顏色要使用代詞加數(shù)字大小形式數(shù)字規(guī)格顏色變量不許由或者方法計(jì)算得出項(xiàng)目顏色基于配色基礎(chǔ)色庫設(shè)計(jì)師都會(huì)配出來項(xiàng)目色庫需要項(xiàng)目去改變?cè)O(shè)計(jì)師文字和前端頁面開發(fā)者文字必須為同一類 文中sass的一些方法 來源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 請(qǐng)大家自行拷貝粘貼 showImg(ht...
閱讀 3997·2021-11-25 09:43
閱讀 2246·2021-11-23 10:11
閱讀 1483·2021-09-29 09:35
閱讀 1417·2021-09-24 10:31
閱讀 2106·2019-08-30 15:48
閱讀 2466·2019-08-29 15:28
閱讀 499·2019-08-29 12:36
閱讀 3558·2019-08-28 18:12
