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. Java 转JSON串

    一.JSON (JavaScript Object Notation) 1.轻量级数据交换格式能够替代XML的工作 2.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小(简洁.简单.体积小 ...

  2. oracle 的tnsnames.ora，listener.ora

    x:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN listener.ora: # listener.ora Network Conf ...

  3. 虚拟机Ubuntu18.04——gcc版本的升降

    致读者:这是本人第一篇博客,小试牛刀,希望能在以后的道路中分享出更多实用的技巧和知识,大家一起进步. 操作环境: VMware Workstation 14Pro .64位Ubuntu18.04系统 ...

  4. js生成uuid

    前端不能像java一样有内置的uuid生成包,所以需要自己写一个function,每次调用这个函数都会生成一个不同的字符串,代码如下: getuuid() { var uid = []; var he ...

  5. windows快速搭建FTP工具Serv-U FTP Server

    本文介绍一个简单的FTP工具,当然windows系统自带FTP工具,但是配置方法没有第三方工具来的简单可操作性好. 此工具用于搭建FTP环境,对于需要测试FTP上传功能具有极大帮助.例如球机抓拍图片上 ...

  6. 网页换肤：原生js与jq

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用keil5,加断点调试后，停止运行的问题

    加上断点调试,执行到断点的时就出现程序停止运行的提示. 原因:是工程路径存放太深.

  8. selenium与chrome浏览器及驱动的版本匹配

    用selenium+python+webdriver完成UI功能自动化,经常会碰到浏览器版本与驱动的版本不匹配而引起报错,下面就selenium与chrome浏览器及驱动的版本匹配 做个总结. 使用W ...

  9. 阿里云短信验证使用（PHP）

    1.登陆阿里云后台,事先添加签名和模板 2.使用composer下载阿里云SDK composer require alibabacloud/sdk 在PHP7.0下安装需要提前安装curl扩展 -c ...

  10. Django请求生命周期

    生命周期: 指浏览器访问开始,经过Django都发生了什么 ? 1 首先客服端发送http请求,把请求体(请求头和请求内容)生成 2 服务器接收请求后,根据路由映射表一个一个匹配.匹配成功后,后面不匹 ...