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. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  2. myeclipse在过时的环境下部署项目出现的问题

    开发环境 操作系统:xp sp3 2002 (ps:客户公司环境只有这个老古董) 开发工具:myeclipse2014  32位 jdk: 1.7_49    32位 DB:DB2  9.1  32位 ...

  3. SQL server 2008(Linux安装)

    今天应公司的要求,需要在阿里云上安装sql server 在本地使用,由于自己原来没有涉及过这样的安装所以走了很多的弯路.现在将我的安装过程与大家分享,希望能够帮到想要学习这个方面的人.以下是我用Ce ...

  4. Android 开发 获取Android设备的屏幕高宽

    获得屏幕的宽度和高度有很多种方法: //1.通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); heigth = dm.height ...

  5. PHP原生写的生成图片缩略图类

    PHP原生写的生成图片缩略图类,本文以京东商品图片为例,分别生成三种不同尺寸的图片.调用方法很简单只要传参数高度和宽度,及新图片的名称. 引入缩略图类 include_once 'ImageResiz ...

  6. python-day2列表、元祖、字典；编码；字符串

    @导入模块时,会先搜索目前路径的同名py文件,再去全局环境变量找 @看模块的环境变量 import sys print(sys.path) @site-package存放第三方库,可以把自己建的拷贝在 ...

  7. [SQL][MS SQL]ID自增列从1开始重新排序

    数据库中把ID自增长重置成1: 一般做法:(太麻烦) 复制表数据->删除原表.新建一张表->粘贴: 新方法: 数据库中:新建查询->复制.粘贴一下代码->修改表名,执行即可(先 ...

  8. 远程git仓库的搭建

    具体的操作见另一篇 第一部分: 安装 1. 下载地址:  https://git-scm.com/download/win; 如果速度慢, 使用 迅雷下载; 2. 点击安装, 然后下一步, 直到下面这 ...

  9. 关于ComboBox的控件事件CBN_SELCHANGE总是取到旧值的问题

    我发现复选框,选择以后,在这个事件函数中,总是取到旧值,读了这个朋友的文章,找到了解决方法. 下面是参考的文章: http://scorpiomiracle.iteye.com/blog/710511 ...

  10. nginx配置location总结及rewrite规则写法(转)

    一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这 ...