iconfont

關于阿里云圖標庫使用的介紹

對于添加到網頁中的iconfont可使用以下幾種方式：

首先需要進入阿里云圖標庫官網進行對應的下載iconfont-阿里巴巴矢量圖標庫

將需要的圖標加入到購物車

再添加至項目通過項目中進行下載

打開所下載的壓縮包會有如下目錄

?全選復制到所需項目的文件夾下（除去demo.css和demo.index不復制）

?之后打開對應的demo.index文件

?到這里準備工作完成，接下來是使用方法

1、通過實體進行操作

引入對應文件

<link rel="stylesheet" href="./iconfont/iconfont.css">

進行實體操作（對應的實體編碼即為demo.index中對應的圖標下所寫的值），復制過來即可

1 <!-- 實體操作 --> 2 <i class="iconfont">&#xe604;</i> 3 <i class="iconfont">&#xe605;</i> 4 <i class="iconfont">&#xe606;</i>

效果圖

?2、通過類進行引入

直接在需要引入的位置添加? <i class="iconfont icon-mianfeigongjiao"></i>?

同樣對應的類名位于文檔內

效果圖

3、通過偽類進行引入

?　　

?通過對元素設置css樣式的偽類進行插入

例如：

html中

?<p>hello</p>

css加入

/* 偽類操作 */p::after{content: '\e604';font-family: iconfont ;font-size: 50px;color: red;}

顏色和大小都可以自己設置? content中的值為（取后4位? #x用\ 代替）

?

效果圖

?

?

?

總結

以上是生活随笔為你收集整理的关于阿里云图标的使用 iconfont的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。