阿里巴巴矢量图标iconfont的简单使用

xiangru0921 2022-01-01 原文

下载-阿里巴巴矢量图标

网站链接：http://www.iconfont.cn/

首页如下：首页-进入图标库–所有图标–搜索/点击你想要的图标–添加购物车

点击购物车（下载）如下图：

点击下载代码–存储即可！

找到存储的位置：

解压–将下图选中的文件存储在新建的文件夹中（命名为icon或者别的名字都行）

引入到你需要用到iconfont的文件中！

=======================================================================

使用（用例代码如下）：

可以通过color和font-size等等属性来改变iconfont图标的大小和颜色及其他性质！

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="icon/iconfont.css" />
  <style type="text/css">
   i:nth-child(odd){
    color: red;
    font-size: 100px;
   }
   i:nth-child(even){
    color: blue;
    font-size: 100px;
   }
  </style>
 </head>
 <body>
 　　 <i class="iconfont icon-backpack"></i>
 　　 <i class="iconfont icon-abra"></i>
 　　 <i class="iconfont icon-action"></i>
 　　 <i class="iconfont icon-augmented-reality-"></i>
　　  <i class="iconfont icon-action-"></i>
　　  <i class="iconfont icon-bellsprout"></i>
　　  <i class="iconfont icon-bracelet"></i>
 　　 <i class="iconfont icon-battle"></i>
 　　 <i class="iconfont icon-blue-team"></i>
　　  <i class="iconfont icon-camera"></i>
　　  <i class="iconfont icon-candy"></i>
 　　 <i class="iconfont icon-bullbasaur"></i>
  　　<i class="iconfont icon-charmander"></i>
 　　 <i class="iconfont icon-combat-power"></i>
  　　<i class="iconfont icon-caterpie"></i>
  　　<i class="iconfont icon-crown"></i>
 </body>
 <script src="icon/iconfont.js"></script>
</html>