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. JDK源码中使用的设计模式

    结构型模式: 适配器模式: 用来把一个接口转化成另一个接口. java.util.Arrays#asList() javax.swing.JTable(TableModel) java.io.Inpu ...

  2. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  3. 为什么移动构造要使用noexcept

    vector::push_back操作,保证了如果过程中出现异常,vector不会发生变化. push_back过程中,可能会因为已有内存空间不够,申请新的内存,同时把原内存中已有的元素,放到新申请的 ...

  4. 结合之前看的一些东西，阅读RockMQ实战与原理解析笔记

    Topic有多个message queue,消息可以并行的向各个message queue发送,消费者也可以并行的从多个message queue读取消息并消费 clustering模式消费一个top ...

  5. 逆变(contravariant)与协变(covariant):只能用在接口和委托上面

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 把nginx当完全tcp端口转发器

    在nginx.conf里加入 stream {     server {         listen 18443;         proxy_pass 58.xxx.xxx.xxx:8443;   ...

  7. makefile（一）

    Makefile的一个具体的实例 来源:http://blog.sina.com.cn/s/blog_73d4d5fa0100paiy.html (2011-03-06 23:10:02) 转载▼ 标 ...

  8. 保存chrome书签中链接顺序的小技巧

    长期以来,我的chrome浏览器书签总是不能自主排序,用书签管理器排序之后,不关闭chrome是好的,一旦关闭重开,又会恢复成原先的排序,实在很诧异,手动修改Bookmars文件也不行. 我们知道,如 ...

  9. 关于ASP.NET 服务器报错 Server Error in '/' Application Runtime Error 错误及解决方法

    今天遇到一个错误 程序在服务器上运行时报错 先贴上错误代码 自己也在网上找了一些解决方法,把错误定位到服务器的配置文件也就是Web.config的问题, 于是在system.web节点下 加上cust ...

  10. java使用selenium版本不兼容解决汇总

    selenium之webDriver与浏览器版本问题 http://blog.csdn.net/xqhadoop/article/details/77892796 selenium自动化测试资源整理( ...