iconfont的简单使用

时间 2019-11-08

标签 iconfont 简单使用繁體版

原文原文链接

下载-阿里巴巴矢量图标 css

网站连接：http://www.iconfont.cn/
html

首页以下：首页-进入图标库--全部图标--搜索/点击你想要的图标--添加购物车测试

点击购物车（下载）以下图：网站

点击下载代码--存储便可！spa

找到存储的位置：3d

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

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

=======================================================================blog

使用（用例代码以下）：ip

能够经过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>

测试代码-效果图：

-------------------------------------------------------------------------------------------------------------