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>

    测试代码-效果图:

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


    我好想爱这个世界啊
  • 相关阅读:
    Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效
    Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
    Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果
    各产品编译及串口烧录
    C 语言代码规范
    烧录
    共享目录
    openwrt Makefile
    netfilter 参考pywj的《netfilter + nf_conntrack + iptables》
    iptables问题
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6496591.html
Copyright © 2011-2022 走看看