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>

測試代碼-效果圖：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。