• 阿里iconfont的使用


    1.找到阿里巴巴图标库

    img

    2.找到图标

    img

    3.搜索你想要的图标

    img

    img

    img

    img

    4.将图标添加到购物车

    img

    5.点击右上角的购物车按钮,我这里添加了两个。

    img

    img

    6.提示你登陆,不需要花钱,找其中一个账号登陆一下就行了

    img

      假如你使用微博登陆,点击以下新浪微博,扫一下二维码就登陆上了,或者使用用户名和密码登陆都可以

    img

    7.登陆成功之后,网站会提示你是否同意登陆,点击同意就可以了

    img

    img

    8.然后回来接着点击购物车,下载代码:

    img

    9.下载解压以下

    img

    10.打开加压的文件夹,看一下文件

    img

    11.我们打开第一个demo来看看怎么使用

    img

    12 使用

      首先将这些文件copy到你的目录下

      img

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
    </head>
    <body>
    
    <div>
        <i class="iconfont icon-search" style="color:green;font-size:20px;"></i>   <!--必须使用i标签,class里面必须写iconfont,设置图标大小和颜色都和文字的设置是一样的-->
    </div>
    
    </body>
    </html>
    

      效果:

        img

    13 如果你是在input标签里面通过value属性来使用的话,要看另外一个demo

      img

    img

    14. input标签中使用示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
    </head>
    <body>
    
    <div>    <!--value="unicode代码",class里面必须有iconfont这个值,上面必须引入css文件-->
        <input type="submit" value="&#xe62d;" class="iconfont">
        <input type="submit" value="&#xe611;" class="iconfont">
    </div>
    
    
    
    </body>
    </html>
    

      效果:

        img

    ok,iconfont就使用到这里了。

  • 相关阅读:
    Hibernate @Entity注解配置说明
    hadoop基准測试
    Android
    cgroup子系统2_devices子系统
    【转】掌握java枚举类型(enum type)
    【转】Java基础笔记 – 枚举类型的使用介绍和静态导入--不错
    【转】Java 枚举7常见种用法
    【转】java枚举类型enum的使用
    【转】Any way to implement BLE notifications in Android-L preview----不错
    【转】EditText大小(长宽)的多种设置方式----不错
  • 原文地址:https://www.cnblogs.com/changxin7/p/11479216.html
Copyright © 2020-2023  润新知