圖標字體
在前端開發(fā)中,圖標是最常見的用于美化頁面的元素。
早前還需由UI人員做成各種小圖片然后放到頁面中,隨著移動端應用的普及,為了更好的縮放效果,節(jié)省流量,提高運行效率,現(xiàn)在都已經改成了圖標字體的技術,而很少需要用圖片來完成了。
圖標字體,就是一種特殊的字體,只不過顯示出來不是字而是一個圖形。
最常見的一種就是windows自帶的特殊字符,比如我們可以直接寫出“○●◎→←↑↓”這樣的簡單圖形,由于無需調用圖片,能像寫字一樣寫出來,性能優(yōu)異而且使用方便。
windows自帶的特殊字符是很有限的,所以圖標字體的技術逐漸發(fā)展起來,工程師們自己造圖形文字,寫成字庫,現(xiàn)在很多前端UI框架,像流行的bootstrap,ElementUI等,幾乎都內置了大量的圖標字體。
為什么要做自己專屬的圖標字庫
既然框架里都集成了圖標字體,那我們還去做自己的圖標字庫有什么意義呢?
當然是有意義的,首先,并非每個項目都會使用到那些框架。其次,即使用了這些框架,他們集成的圖標也是有限的,并不一定能滿足使用需求。再次,即使只使用少量的幾個圖標,也需要帶上整個框架的龐大圖標字庫,那不是很低效嗎?
所以,制作自己的精選圖標庫,或者為自己的某個項目制作專屬的圖標庫,就顯得非常有必要了,也方便以后重復使用或移植。
今天,就教給大家如何只用
3個步驟制作自己的圖標字體庫
第一步,打開阿里圖標庫
網址 https://www.iconfont.cn
這是阿里巴巴開源的圖標庫,全部免費使用,而且還是矢量圖標哦!趕緊注冊登錄吧!
第二步,選擇圖標加入購物車
阿里巴巴號稱里面已經有585萬個免費圖標了,是的,你沒有看錯,總有一款適合你!點擊加入購物車!
第3步,下載圖標
進入購物車,直接下載,當然這個是免費的哦!
圖標字體的使用
首先把字庫文件全部放到比如font目錄下
然后在頁面里引入
<link rel="stylesheet" href="./font/iconfont.css">
現(xiàn)在就可以使用了。在下載的壓縮包里有個demo_index.html,里面有圖標列表,還有詳細的說明,可以用3種方式使用,區(qū)別在于易讀性和瀏覽器兼容性。文檔很長,要是你沒耐心讀,那么就用我教你的這個法子好了,先看圖標列表,比如可能是這樣:
如果我們需要用戶頭像這個,對應的是 icon-user,那就這樣寫:
<span class="iconfont icon-user"></span>
于是span這個地方就會變成人像圖標了,是不是很好用呢?
除了使用現(xiàn)成的圖標,也可以自己創(chuàng)作或者編輯修改,網站上也提供了豐富的工具。
聲明:本文由網站用戶竹子發(fā)表,超夢電商平臺僅提供信息存儲服務,版權歸原作者所有。若發(fā)現(xiàn)本站文章存在版權問題,如發(fā)現(xiàn)文章、圖片等侵權行為,請聯(lián)系我們刪除。