阿里iconfont的使用


1.找到阿里巴巴圖標庫

img

2.找到圖標

img

3.搜索你想要的圖標

img

img

img

img

4.將圖標添加到購物車

img

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

img

img

6.提示你登陸,不需要花錢,找其中一個賬號登陸一下就行了

img

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

img

7.登陸成功之后,網站會提示你是否同意登陸,點擊同意就可以了

img

img

8.然后回來接着點擊購物車,下載代碼:

img

9.下載解壓以下

img

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

img

11.我們打開第一個demo來看看怎么使用

img

12 使用

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

  img

<!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>

  效果:

    img

13 如果你是在input標簽里面通過value屬性來使用的話,要看另外一個demo

  img

img

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>

  效果:

    img

ok,iconfont就使用到這里了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM