阿里iconfont的使用

時間 2019-11-11

標籤阿里 iconfont 使用欄目阿里巴巴简体版

原文原文鏈接

1.找到阿里巴巴圖標庫

2.找到圖標

3.搜索你想要的圖標

4.將圖標添加到購物車

5.點擊右上角的購物車按鈕，我這裏添加了兩個。

6.提示你登錄，不須要花錢，找其中一個帳號登錄一下就好了

　　假如你使用微博登錄，點擊如下新浪微博，掃一下二維碼就登錄上了，或者使用用戶名和密碼登錄均可以css

7.登錄成功以後，網站會提示你是否贊成登錄，點擊贊成就能夠了

8.而後回來接着點擊購物車，下載代碼：

9.下載解壓如下

10.打開加壓的文件夾，看一下文件

11.咱們打開第一個demo來看看怎麼使用

12 使用

　　首先將這些文件copy到你的目錄下html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
</head>
<body>

<div>
    <i class="iconfont icon-search" style="color:green;font-size:20px;"></i> 　　<!--必須使用i標籤，class裏面必須寫iconfont，設置圖標大小和顏色都和文字的設置是同樣的-->
</div>

</body>
</html>

　　效果：網站

13 若是你是在input標籤裏面經過value屬性來使用的話，要看另一個demo

14. input標籤中使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
</head>
<body>

<div>    <!--value="unicode代碼",class裏面必須有iconfont這個值，上面必須引入css文件-->
    <input type="submit" value="&#xe62d;" class="iconfont">
    <input type="submit" value="&#xe611;" class="iconfont">
</div>



</body>
</html>

　　效果：3d

ok，iconfont就使用到這裏了。code