字型圖示能提供可以直接使用CSS修改的可縮放的矢量圖示,可以修改的内容包括圖示的大小、顔色、陰影等這些CSS的力量能做到的一切。
可以借阿裡圖示庫的力O(∩_∩)O~:http://www.iconfont.cn/
1、先打開阿裡巴巴矢量圖網站
2、搜尋你分類的關鍵字—然後加入購物車,這個是免費的
2、下載下傳到本地
下載下傳到本地,然後解壓。會将合并後的字型檔案及自動生成的css全部下載下傳
3、看demo學如何把字型圖示用起來(有3種方式,随自己喜歡)
4、把下載下傳下來的檔案導入項目工程裡
如圖:
然後即可引用剛生成的字型圖示代碼如下:
引入:
html代碼:
<a>
<span class="iconfont icon-hetongguanli-"></span>
<span class="write">寫文章</span>
</a>
Tip: 如果是自己在iconfont上傳的svg生成的圖示,可以自己設定’icon-xxx’名