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>

    测试代码-效果图:

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


    我好想爱这个世界啊
  • 相关阅读:
    HLS视频直播
    CocoaPods版本升级
    项目管理:CocoaPods建立私有仓库
    cocospod 安装和使用
    sqlite加密
    socket的心跳包机制
    iOS开发必备HUD(透明指示层)
    iOS 第一次安装应用,拒绝相机调用,页面卡死的解决方案
    UINavigationController侧滑滑动返回 卡死问题
    第四周学习进度
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6496591.html
Copyright © 2011-2022 走看看