css3 100多個白色線性圖標樣式代碼
分享css3 100多個白色線性圖標樣式代碼,總共100多個,每一個圖標都是利用CSS3的相關特性來實現。在這些CSS3圖標中,有部分是動態圖標,這些帶動畫的圖標同樣也是利用CSS3的動畫屬性實現的。
小白補腦:
首先,我們先惡補下什么是字體圖標:用字體文件取代圖片文件,來展示圖標、特殊字體等元素的方法。
優點:
- 加載文件體積小
- 統一展示風格,使用方法
- 通過font-size,color就能自由變化大小,修改顏色,就像控制文字一樣簡單
- 可以添加一些視覺效果如:陰影、旋轉、透明度
- 兼容IE6
- 后期維護成本很低
缺點:
- 制作門檻有點高,需要借助專業的工具生成字庫文件
- 需要服務器做些相應的配置來解決識別問題和跨域問題
使用方法:
首先,在head頭部引入字體css文件
<link rel="stylesheet" href="css/icono.min.css">
然后,在需要加入圖標的地方通過對應的css類名調用
<i class="icono-share"></i>
更多個性化定制,阿里巴巴Iconfont平臺不但免費提供了1w多個常用的圖標,然后通過相關工具可以指定出大家喜歡的個性圖標感興趣的可以看一下我之前的一篇關于icon字體圖標的制作方式《如何將SVG文件轉換成圖標字體文件》
下載方式:百度網盤 提取碼:jdrj
聲明:
1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
碼云筆記 » css3 100多個白色線性圖標樣式代碼
1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
碼云筆記 » css3 100多個白色線性圖標樣式代碼