iconfont的简单使用

下载-阿里巴巴矢量图标  

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

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

iconfont的简单使用_第1张图片

点击购物车(下载) 如下图:

iconfont的简单使用_第2张图片

点击下载代码--存储 即可!

找到存储的位置:

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

iconfont的简单使用_第3张图片

引入到你需要用到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

你可能感兴趣的:(iconfont的简单使用)