資訊專欄INFORMATION COLUMN
摘要：已經被添加入庫的圖標會以虛線框起來，以鑒別是否重復選取。點擊右上角的購物車小圖標，選擇添加至項目。創建項目并加入此新項目。將代碼引入頁面中，一般放在標簽內即可。這是一種最新的引入方式，也是未來主流的方式。
在我們使用CSS對頁面進行編輯布局時，經常會用到一些小圖標或者logo。
常見的比如我們在制作個人主頁時，使用超鏈接圖標來跳轉到你的微博或其他頁面等。這時候就會有一個很困擾的問題：去哪里“找”這些圖標呢？
不外乎兩種：
自己通過專業的軟件來切圖或繪制，需要有一定的了解；
其次，就是“找現成的”。
但是網上的logo和圖片樣式各異，像素層次不齊，很難收集到有用的信息。
我們在寫CSS時需要用到很多的工具或者工具類網站，今天就為大家介紹一個專門采集各種圖標的網站和使用的教程：
http://www.iconfont.cn
阿里巴巴矢量圖標庫
首先進入主頁，點擊右上角的登錄，推薦使用GitHub登錄。
在搜索框內輸入你想要找到的圖標，比如："weibo"。
出現了很多關于微博的圖標，這里我們點擊第三行第一個"weibo"，鼠標挪動選擇第一個“添加入庫”。
已經被添加入庫的圖標會以虛線框起來，以鑒別是否重復選取。
我們再搜索幾個自己需要的圖標并以此添加入庫。
點擊右上角的購物車小圖標，選擇添加至項目。創建項目并加入此新項目。
在我的項目頁面，選擇格式"Symbol"——查看在線鏈接——暫無代碼，點此生成。
將代碼引入html頁面中，一般放在head標簽內即可。
這是一種最新的引入方式，也是未來主流的方式。
再加入通用CSS代碼，一次即可。
這時候就可以通過添加svg標簽放在合適的位置，來代替img標簽引用圖標了。
還可以通過font-size,color來調整樣式。
我們可以點擊圖標浮動信息底部的“復制代碼”來替換"#icon-xxx"。
首頁還有管理圖標、項目等眾多功能，總體來說是一個非常實用的CSS獲得矢量圖標的工具網站。即美觀，又節省時間。
Wrtten by：EdenSheng
Email：singlesaulwork@gmail.com
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117037.html
摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...
摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...
摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...
摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。 字體圖標iconfont阿里官網傳送門： http://www.iconfont.cn/打開首頁的小圖標好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...
閱讀 799·2021-09-22 16:01
閱讀 2093·2021-08-20 09:37
閱讀 1699·2019-08-30 15:54
閱讀 1698·2019-08-30 15:44
閱讀 840·2019-08-28 18:23
閱讀 3018·2019-08-26 12:17
閱讀 1021·2019-08-26 11:56
閱讀 1544·2019-08-23 16:20
