首先什么是字體圖標(biāo)呢，那就是表面上是圖標(biāo)，其實(shí)它是文字，我們可以就像設(shè)置文字一樣去設(shè)置字體圖標(biāo)，一般可以使用兩種方式去設(shè)置字體圖標(biāo)，一種是引入css文件，然后設(shè)置特殊的class就可以了；另外一種是通過偽元素中的content去設(shè)置，下面跟我一起來看看 如何設(shè)置吧！

1：引入css文件，然后設(shè)置特殊的class去使用字體圖標(biāo)

我使用iconfont官網(wǎng)來進(jìn)行實(shí)驗(yàn)，首先使用百度搜索iconfont，進(jìn)入官網(wǎng)之后登錄，登錄之后先去新建 一個項(xiàng)目，首先打開我的項(xiàng)目：

點(diǎn)擊新建項(xiàng)目圖標(biāo)：

然后輸入項(xiàng)目名稱，點(diǎn)擊新建：

之后就可以去上方搜索框搜索你想要的圖標(biāo)了，例如輸入“天貓”，點(diǎn)擊回車，然后把鼠標(biāo)放在你想要的圖標(biāo)上面，點(diǎn)擊購物車圖標(biāo)添加入庫：

之后在右上角打開購物車圖標(biāo)，點(diǎn)擊添加至項(xiàng)目 ，選擇你的項(xiàng)目名稱點(diǎn)擊確定就可以了，我的項(xiàng)目名稱是“HelloWorld”：

之后就會進(jìn)入我的項(xiàng)目里面，該項(xiàng)目正是你上面添加圖標(biāo)的那個項(xiàng)目，如果你想在本地使用的話，點(diǎn)擊下載至本地：

下載完成之后解壓，把解壓文件中最里面的所有文件（以css、eot、woff等結(jié)尾的文件）復(fù)制到我項(xiàng)目下方的某文件夾下，該文件夾可以隨意命名：

之后在html文件里面引入里面的iconfont.css文件：

使用的方法是在我想要放置圖標(biāo)的元素的class中首先加入iconfont，之后在加入該圖標(biāo)的名稱，名稱如下：

如果要使用該名稱，只需要把移動到該圖標(biāo)上面，在彈出框中點(diǎn)擊復(fù)制代碼就可以了：

之后就可以直接去使用了：

其中iconfont是必須的，后面的是我們上面復(fù)制代碼后的名稱

如果你不想下載到本地的話，你也可以使用在線css文件來做，首先我們找到iconfont官網(wǎng)中上述項(xiàng)目那個界面，首先點(diǎn)擊“Font class”，然后點(diǎn)擊“暫無代碼，點(diǎn)此生成”，之后我們就可以看到一個鏈接：

那我們就不需要下載文件了，也不需要導(dǎo)入相關(guān)文件了，只需要在使用圖標(biāo)的html代碼中引入css文件：

之后就可以直接去使用了，class依然里面需要包含 iconfont，之后需要包含圖標(biāo)的名稱作為class，圖標(biāo)名稱還是通過“復(fù)制代碼”的方式獲得：

之后就這樣寫就可以了:

2、通過偽元素中的content去設(shè)置

通過上面的步驟可以把圖標(biāo)添加到項(xiàng)目中，由于上面的那種引入方式已經(jīng)敘述過了，這里在敘述，假設(shè)我們現(xiàn)在已經(jīng)把圖標(biāo)引入到項(xiàng)目中了，我們依然可以先下載到把項(xiàng)目下載到本地，在上一個方法中已經(jīng)說了，這個也不再敘述，之后把里面以eot、woff2、woff、ttf、svg結(jié)尾的文件復(fù)制一下，然后把這些文件賦值在我們的項(xiàng)目中的某個文件里面：

之后在css文件中引入這些文件，方法如下：

@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中，如下所示：

[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)，找到我們項(xiàng)目中的圖標(biāo)，在上面停留之后，點(diǎn)擊編輯圖標(biāo)：

復(fù)制“Unicode(16進(jìn)制)”下面的內(nèi)容：

這就完成了

如果你不想下載到本地的話，你也可以使用在線Unicode編碼，首先我們找到iconfont官網(wǎng)中上述項(xiàng)目那個界面，點(diǎn)擊“Unicode”，然后點(diǎn)擊“暫無代碼，點(diǎn)此生成”，之后我們就可以看到一個鏈接：

復(fù)制鏈接內(nèi)容，這樣我們就不需要復(fù)制文件到項(xiàng)目中了，只需要把上述鏈接內(nèi)容放置到css文件里面：

@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中寫：

[class^="icon-"],
[class*="icon-"] {
	font-family: 'iconfont';
	font-style: normal;
}

之后還要寫上，content中的內(nèi)容到底是什么在上面有詳細(xì)說明，不在贅述：

.icon-tianmao::before {
	content: '\e799';
}

然后html文件中的它也不能少，這些都在第二種方法中有詳細(xì)解釋，這里就 不在贅述了：

<i class="icon-tianmao"></i>

到此這篇關(guān)于讓我來教你使用css中的字體圖標(biāo)的方法的文章就介紹到這了,更多相關(guān)css字體圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論