本篇教程介紹了HTML+CSS入門之兩種圖標字體庫，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML+CSS入門。

<

##?0.?前言

比較基礎(chǔ)的圖標加載：和塊元素的背景background:?url(./x.png).

頁面多圖標時，使用雪碧圖(多個png壓縮成一個png，定位來使用)，減少圖片所占空間。

大屏顯示，為保證圖標清晰度，可以使用svg格式的圖片。svg是矢量圖，直接更改svg代碼中path的fill改變顏色。

可自編輯開源svg庫?[http://www.iconfont.cn/home/index](http://www.iconfont.cn/home/index?"阿里巴巴圖標庫")

圖標字體庫，圖標被生成字體文件，通過class決定圖標，font-size決定大小，color決定顏色。主要使用的是css中偽類：before、css3中的@font-face,因而繼承了font的其他規(guī)則。

@font-face????{????????font-family:?myFirstFont;????????src:?url('Sansation_Light.ttf'),?????????????url('Sansation_Light.eot');?/*?IE9+?*/????}????div????{????????font-family:myFirstFont;????}????適用：單色圖標

##?1.?Font?Awesome

class="fa?fa-name?fa-size?fa-pull-left"?前兩個必有

優(yōu)點：開箱即用

缺點：擴展麻煩，項目加載過多無用圖標

[http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)

##?2.?IcoMoon

class="icon-name"

優(yōu)點：易于擴展，包括自己團隊做的svg圖標可在官網(wǎng)生成相應(yīng)的fonts文件

缺點：擴展更新，一旦出現(xiàn)問題，會影響項目其他圖標的顯示

[https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)

##?4.?深度理解

擴展自己的圖標庫

1.?擴展.eot.svg.ttf.woff等相關(guān)字體庫

2.?偽類

.icon-name:before?{????????????content:?"\f003";????????}

本文由職坐標整理發(fā)布，歡迎關(guān)注職坐標WEB前端HTML/CSS頻道，獲取更多HTML/CSS知識！

總結(jié)

以上是生活随笔為你收集整理的html css导航栏字体图标,HTML+CSS入门之两种图标字体库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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