html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介紹了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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html 选择不能重复,人生,就是一次无
- 下一篇: [转][HTML]css属性