關於阿里雲圖標的使用 iconfont

iconfont

關於阿里雲圖標庫使用的介紹

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

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

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

 

 

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

 

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

 

 

 

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

 

 

 

 

 

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

 

 

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

1、通過實體進行操作

引入對應文件

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

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

<!-- 實體操作 -->
    <i class="iconfont">&#xe604;</i>
    <i class="iconfont">&#xe605;</i>
    <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用\ 代替）

 

 

效果圖