天天看點

web字型圖示(font-icon)

字型圖示能提供可以直接使用CSS修改的可縮放的矢量圖示,可以修改的内容包括圖示的大小、顔色、陰影等這些CSS的力量能做到的一切。

可以借阿裡圖示庫的力O(∩_∩)O~:http://www.iconfont.cn/

1、先打開阿裡巴巴矢量圖網站

web字型圖示(font-icon)

2、搜尋你分類的關鍵字—然後加入購物車,這個是免費的

web字型圖示(font-icon)

2、下載下傳到本地

web字型圖示(font-icon)

下載下傳到本地,然後解壓。會将合并後的字型檔案及自動生成的css全部下載下傳

web字型圖示(font-icon)

3、看demo學如何把字型圖示用起來(有3種方式,随自己喜歡)

web字型圖示(font-icon)
web字型圖示(font-icon)

4、把下載下傳下來的檔案導入項目工程裡

如圖:

web字型圖示(font-icon)

然後即可引用剛生成的字型圖示代碼如下:

引入:

html代碼:

<a>
    <span class="iconfont icon-hetongguanli-"></span>
    <span class="write">寫文章</span>
</a>
           

Tip: 如果是自己在iconfont上傳的svg生成的圖示,可以自己設定’icon-xxx’名

web字型圖示(font-icon)

繼續閱讀