zoukankan      html  css  js  c++  java
  • 阿里巴巴矢量图标iconfont的简单使用

    下载-阿里巴巴矢量图标  

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

    测试代码-效果图:

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


    我好想爱这个世界啊
  • 相关阅读:
    IDEA学习和收藏夹
    mysql资料收集及学习
    一些模板代码
    docker学习
    Spring事务传播类型
    rust学习疑惑
    [重新做人]从头学习JAVA SE——java.lang.reflect
    java核心技术卷一
    Spring实战 难懂的JavaBean
    Spring实战系列
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6496591.html
Copyright © 2011-2022 走看看