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