iconfont的简单使用

最新推荐文章于 2025-03-31 10:43:47 发布

转载最新推荐文章于 2025-03-31 10:43:47 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiangru0921/p/6496591.html

本文介绍如何从阿里巴巴图标库下载图标，并提供了一个使用示例。通过简单的步骤，你可以获取所需的图标，并利用CSS属性调整其显示效果。

下载-阿里巴巴矢量图标

网站链接：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>

测试代码-效果图：

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

转载于:https://www.cnblogs.com/xiangru0921/p/6496591.html