先去注冊(cè)個(gè)號(hào)碼，好像只可以用新浪微博登錄哈，搞一個(gè)微博去。

第一就是點(diǎn)上面圖標(biāo)庫(kù)，選擇官方和所有都行。

恩接著點(diǎn)一個(gè)圖標(biāo)，他就自己跑到 第二個(gè)按鈕哪里去了，在點(diǎn)第二個(gè)按鈕，會(huì)出來(lái)一個(gè)創(chuàng)建項(xiàng)目，隨便創(chuàng)建一個(gè)就好。

上圖不說(shuō)話(huà)

下載本地這個(gè) 大家都會(huì)把我就不解釋了哈，別問(wèn)我 怎么不和照片一樣，我之前就給那個(gè)項(xiàng)目里面加了好幾個(gè)圖標(biāo)，你的只有一個(gè)圖標(biāo)是正確的。

恩然后就得到了這么多文件，然而我們只要我紅色框里面圈到的文件就好

?

?

現(xiàn)在我們把 我們要得到的東西都得到了，然后就是 你自己寫(xiě)html了：

第一步：使用font-face聲明字體

@font-face {
　　font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome、firefox */url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('iconfont.svg') format('svg'); /* iOS 4.1- */
}

第二步：定義使用iconfont的樣式

.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

<i class="iconfont">&#x33;</i>

第一步那些代碼全部復(fù)制粘貼到你的css文件，嗯嗯，上面說(shuō)到 要的那四個(gè)文件 你找一個(gè)地方存著，看后綴eot和woff和ttf和svg后綴的，對(duì)于上面的吧路徑弄對(duì)，弄就是搞的意思。然后把第二部全部也復(fù)制在css里面，那個(gè) .inconfont 那個(gè)class名字，你給你的i標(biāo)簽class用什么名字第二部就用什么名字。當(dāng)然在第二部那個(gè)inconfont里面也可以加color顏色啊，font-size改變大小啊 都可以的哈。第三部i標(biāo)簽里面放的那個(gè)代碼就是第四張圖 下面的那個(gè)代碼，那個(gè)代碼就能出來(lái)圖標(biāo) 恩 OK了，完美不，快大聲喊完美

?

轉(zhuǎn)載于:https://www.cnblogs.com/shoestrong/p/5394229.html

總結(jié)

以上是生活随笔為你收集整理的inconfont 字体库应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。