在CSS中引入字體圖標(biāo)，看操作！
2022-12-09 加入收藏
首先什么是字體圖標(biāo)呢，那就是表面上是圖標(biāo)，其實它是文字，我們可以就像設(shè)置文字一樣去設(shè)置字體圖標(biāo)，一般可以使用兩種方式去設(shè)置字體圖標(biāo)，一種是引入css文件，然后設(shè)置特殊的class就可以了；另外一種是通過偽元素中的content去設(shè)置，下面跟我一起來看看 如何設(shè)置吧！
1：引入css文件，然后設(shè)置特殊的class去使用字體圖標(biāo)
我使用iconfont官網(wǎng)來進(jìn)行實驗，首先使用百度搜索iconfont，進(jìn)入官網(wǎng)之后登錄，登錄之后先去新建 一個項目，首先打開我的項目：
點擊新建項目圖標(biāo)：
然后輸入項目名稱，點擊新建：
之后就可以去上方搜索框搜索你想要的圖標(biāo)了，例如輸入“天貓”，點擊回車，然后把鼠標(biāo)放在你想要的圖標(biāo)上面，點擊購物車圖標(biāo)添加入庫：
之后在右上角打開購物車圖標(biāo)，點擊添加至項目 ，選擇你的項目名稱點擊確定就可以了，我的項目名稱是“HelloWorld”：
之后就會進(jìn)入我的項目里面，該項目正是你上面添加圖標(biāo)的那個項目，如果你想在本地使用的話，點擊下載至本地：
下載完成之后解壓，把解壓文件中最里面的所有文件（以css、eot、woff等結(jié)尾的文件）復(fù)制到我項目下方的某文件夾下，該文件夾可以隨意命名：
之后在html文件里面引入里面的iconfont.css文件：
使用的方法是在我想要放置圖標(biāo)的元素的class中首先加入iconfont，之后在加入該圖標(biāo)的名稱，名稱如下：
如果要使用該名稱，只需要把移動到該圖標(biāo)上面，在彈出框中點擊復(fù)制代碼就可以了：
之后就可以直接去使用了：
其中iconfont是必須的，后面的是我們上面復(fù)制代碼后的名稱
如果你不想下載到本地的話，你也可以使用在線css文件來做，首先我們找到iconfont官網(wǎng)中上述項目那個界面，首先點擊“Font class”，然后點擊“暫無代碼，點此生成”，之后我們就可以看到一個鏈接：
那我們就不需要下載文件了，也不需要導(dǎo)入相關(guān)文件了，只需要在使用圖標(biāo)的html代碼中引入css文件：
之后就可以直接去使用了，class依然里面需要包含 iconfont，之后需要包含圖標(biāo)的名稱作為class，圖標(biāo)名稱還是通過“復(fù)制代碼”的方式獲得：
之后就這樣寫就可以了:
2、通過偽元素中的content去設(shè)置
通過上面的步驟可以把圖標(biāo)添加到項目中，由于上面的那種引入方式已經(jīng)敘述過了，這里在敘述，假設(shè)我們現(xiàn)在已經(jīng)把圖標(biāo)引入到項目中了，我們依然可以先下載到把項目下載到本地，在上一個方法中已經(jīng)說了，這個也不再敘述，之后把里面以eot、woff2、woff、ttf、svg結(jié)尾的文件復(fù)制一下，然后把這些文件賦值在我們的項目中的某個文件里面：
之后在css文件中引入這些文件，方法如下：
1 2 3 4 5 6 7 8 9 | @font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff2') format('woff2'),url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */} |
以上的font-family是我們自己定義的，需要在url中引入這些文件，url()中的單引號里面是這些文件相對于這些css文件的url地址，里面的#iefix、#iconfont不能少，其中#iefix是固定不變的，而#iconfont中的名稱是font-family中的名稱，他們需要加在相應(yīng)文件名稱的后面，format()中的內(nèi)容不能變，你可以先把上述的內(nèi)容復(fù)制到你自己的里面，只根據(jù)后綴名去更改相應(yīng)的url地址就可以了，別亂改不然會出錯，由于我們會多次使用里面的圖標(biāo)，所以我們需要把某些屬性放在公共的class中，如下所示：
1 2 3 4 5 | [class^="icon-"],[class*="icon-"] { font-family: 'iconfont'; font-style: normal;} |
這代表只要class中包含有icon-就會有font-family和font-style屬性，該font-family的名稱就是@font-face中的font-family中的名稱，如果我們需要使用該class屬性的話，那就htm文件中的元素的class里面加入以icon-開始的名稱，如下所示：
之后我們就可以設(shè)置相應(yīng)的圖標(biāo)了，一般是利用偽元素來設(shè)置，在css中可以這樣設(shè)置：
至于里面的content內(nèi)容，前面的是固定的，后面的e799是這里來的，我們回到iconfont官網(wǎng)，找到我們項目中的圖標(biāo)，在上面停留之后，點擊編輯圖標(biāo)：
復(fù)制“Unicode(16進(jìn)制)”下面的內(nèi)容：
這就完成了
如果你不想下載到本地的話，你也可以使用在線Unicode編碼，首先我們找到iconfont官網(wǎng)中上述項目那個界面，點擊“Unicode”，然后點擊“暫無代碼，點此生成”，之后我們就可以看到一個鏈接：
復(fù)制鏈接內(nèi)容，這樣我們就不需要復(fù)制文件到項目中了，只需要把上述鏈接內(nèi)容放置到css文件里面：
1 2 3 4 5 6 7 8 9 | @font-face { font-family: 'iconfont'; /* project id 2074612 */ src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot'); src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg');} |
之后就在css中寫：
1 2 3 4 5 | [class^="icon-"],[class*="icon-"] { font-family: 'iconfont'; font-style: normal;} |
之后還要寫上，content中的內(nèi)容到底是什么在上面有詳細(xì)說明，不在贅述：
1 2 3 | .icon-tianmao::before { content: 'e799';} |
然后html文件中的它也不能少，這些都在第二種方法中有詳細(xì)解釋，這里就 不在贅述了：
1 | <i class="icon-tianmao"></i> |
到此這篇關(guān)于讓我來教你使用css中的字體圖標(biāo)的方法的文章就介紹到這了,更多相關(guān)css字體圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！