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>

    测试代码-效果图:

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


    我好想爱这个世界啊
  • 相关阅读:
    Spring 源码解析之 XML 解析 到 BeanDefinition
    Mybatis 流程解析 之 mapper映射
    Mybatis 流程解析 之 配置加载
    (二) mybatis 源码分析之日志
    CNC 1320
    CNC 1815
    linux中jdk安装,配置环境变量
    ssm配置文件,方便以后使用
    01 标识符,基本数据类型,自动类型转换与强制类型转换,自增与自减,三元运算符,键盘录入
    N46期第二十一周作业
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6496591.html
Copyright © 2011-2022 走看看