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. MYSQL数据库中中文乱码问题

    show variables like 'character%'; set character_set_database=gbk; 把记事本中的代码引入到mysql数据库中:source +addre ...

  2. C语言列出真分数序列代码及解析

    问题描述 按递增顺序依次列出所有分母为60,分子小于60的最简分数. 问题分析 分子.分母只有公因数1的分数叫做最简分数或者说分子和分母是互质数的分数,叫做最简分数,又称既约分数,如2/3,8/9,3 ...

  3. （Python基础）最Low三级菜单

    #-*-coding:utf-8-*- #_author_: Keep #三级菜单 menu = { '中国':{ '广东省':{ '广州市':{ '海珠区':{}, '荔湾区':{}, '越秀区': ...

  4. Mac谷歌浏览器跨域

    1.创建一个文件夹,这个文件夹是用来保存关闭安全策略后的用户信息的,名字可以随意取,位置也可以随意放,我用的是MyChromeDevUserData open -n /Applications/Goo ...

  5. 秋日上新！H5活动之家营销平台升级大盘点！

    H5活动之家活动营销平台,免费定制使用抽奖.投票.砍价.红包.互动.游戏等不同类型的微信营销活动. 近期多个活动进行了升级改造,更有集福卡持续热度,微助力火热上线等亮点:同时平台也进行了提高访问速度. ...

  6. Spring Security 理解小记

    JWT 框架图如下, 来自博客https://blog.csdn.net/shehun1/article/details/45394405 个人觉得还不错.. 在开发中Spring boot 启用 加 ...

  7. sql中的常见报错；

    1.对于某些写的sql懒得判断的: SELECT * FROM sys_part WHERE part_no =(SELECT part_no FROM dbo.sys_part)  --字查询的结果 ...

  8. Appium基础知识与环境搭建

    基础知识:  环境搭建: 1.安装jdk,配置java环境变量 (1)新建变量"JAVA_HOME",变量值"D:\Frameworks\Java\jdk1.8.0_18 ...

  9. NSIS 查找目录下的所有文件夹

    在制作安装包的时候,需要查看下某一目录下的所有文件夹的名称.经过查资料发现需要用到NSIS 的一个插件Locate.下载该插件后,会在NSIS的安装目录 ...Program Files\NSIS\P ...

  10. if、for、while的详解及实例（一）

    实例一:猜字谜a = 1i = 0while a != 20: a = int (input ('请输入你猜的数字:')) i += 1 print(i) if a == 20: if i<3: ...