iconfont.cn基本使用

  • 登录iconfont.cn网站，直接使用github账号即可登录

  • 输入关键字搜索需要的图标，然后在需要的图标上点击'添加入库'

  • 点击网站右上角的购物车图标，查看当前已入库的图标

  • 点击下方的[添加至项目]按钮，选择已存在的项目或即时新建一个项目，然后确定

  • 点击顶部导航菜单的[图标管理]\[我的项目]，选择一个项目可查看项目内现有的图标

  • 图标列表的上方有几个按钮，最左边的按钮可以选择以Unicode/Font class/Symbol等方式显示

  • 鼠标指向任意图标，可以执行复制代码等相关操作

  • 在Font class/Symbol模式中，图标代码一般为"icon-{图标名}"，但是如果同时加入了多个同名的图标，那么后面加入的同名图标代码会以别的规则产生，为了方便在网页中使用，此时最好用鼠标指向该图标，编辑图标，指定一个合适的新代码(留意：不必输入icon-)。

以在线链接方式使用iconfont图标

在HTML文件中

  1. 登录iconfont网站，选择相应项目，切换到Font class模式，复制在线链接URL
  2. 在html文件中添加link标签，引用上一步复制的url(别忘在前面加上"http:")，在需要显示iconfont图标的地方写上<i class="iconfont icon-{图标名}"></i>即可。 
    <!DOCTYPE html>
    
<html>
    
<head>
    
  <meta charset="utf-8" />
    
  <title>iconfont example</title>
    
  <!--当在iconfont项目中添加/编辑/删除图标后，必须更新在线链接URL-->
    
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_976353_dqgg2ot7ivl.css">
    
</head>
    
<body>
    
  <h1>IconFont 图标</h1>
    
  <p><i class="iconfont icon-verify" style="color:red;"></i>icon-verify</p>
    
  <p><i class="iconfont icon-verify" style="color: 'rgba(0,0,0,.25)'"></i>icon-verify</p>
    
</body>
    
</html>

在使用antd组件的项目中

3.9.0版本之后的antd组件要使用iconfont中的图标非常简单方便

  1. 登录iconfont网站，选择相应的项目，切换到Symbol模式，点击[查看在线链接]按钮，复制该链接路径

  2. 在需要使用iconfont图标的组件内，添加以下代码(scriptUrl值为第1步复制的URL)。

    const MyIcon = Icon.createFromIconfontCN({
    
  scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成
    
});

    注意：当添加/编辑/删除图标后，必须更新在线链接URL，然后将scriptUrl替换为新url

  3. 然后在需要添加图标的地方，添加与下面类似的代码即可：

    <MyIcon type="icon-{图标名}"/>

    type属性的值可直接通过在iconfont网站鼠标指向图标，然后复制代码获得。

以离线方式使用iconfont图标

待写...

使用iconfont图标的更多相关文章

  1. 如何引入iconfont图标与Element-UI组件

    一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...

  2. veu——引入iconfont图标

    我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...

  3. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  4. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  5. [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题

    Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...

  6. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  7. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  8. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

  9. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

随机推荐

  1. jmeter多sql查询

    背景:实现多条sql语句,取多个值的情况 步骤:1.JDBC Connection Configuration配置添加?allowMultiQueries=true 2.增加sql语句 ,查询或修改语 ...

  2. JAVA REENTRANTLOCK、SEMAPHORE 的实现与 AQS 框架

    引言 ReentrantLock是JDK提供的一个可重入互斥锁,所谓可重入就是同一个锁允许被已经获得该锁的线程重新获得.可重入锁的好处可以在递归算法中使用锁,不可重入锁则导致无法在递归算法中使用锁.因 ...

  3. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

  4. 网络协议，socket模块

    """网络通讯要素:1.物理介质2.通讯协议 osi五层模型 应用层 传输层 网络层 数据链路层 物理层 物理层能传输010101二进制单纯的二进制是没有意义的,必须得知 ...

  5. Bootstrap字体无法显示

    下载的font文件没有放进你的项目文件里.

  6. python各种web框架对比

    0 引言        python在web开发方面有着广泛的应用.鉴于各种各样的框架,对于开发者来说如何选择将成为一个问题.为此,我特此对比较常见的几种框架从性能.使用感受以及应用情况进行一个粗略的 ...

  7. EF_简单的增删改查

    EF分为三种code_first,model_first,dabase_first这三种模式,网上的例子有好多,但是用了之后感觉实际中都不是这么用的,此处记录写下来日后用的着了可以快速应用,记录如下: ...

  8. json与csv的基础用与法

    json库是处理json格式的python标准库 有两个过程: 编码(encoding):将python数据类型转换为json格式的过程 解码(decoding):从json格式中解析数据得到的pyt ...

  9. python深拷贝，浅拷贝

    1.浅拷贝, 首先要引用copy包 from copy import copy class A: def __init__(self): self.A=1 self.B=2 a = A() copy( ...

  10. lnmp环境部署脚本-y

    系统环境:centos6.X #!/bin/bash#date:2018-01-01## MySQL 安装8版本的话不太适合,有待于添加安装脚本进行测试#新版的MySQL安装需要高版本2.8以上cma ...