使用iconfont图标
iconfont.cn基本使用
登录iconfont.cn网站,直接使用github账号即可登录
输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库'
点击网站右上角的购物车图标,查看当前已入库的图标
点击下方的[添加至项目]按钮,选择已存在的项目或即时新建一个项目,然后确定
点击顶部导航菜单的[图标管理]\[我的项目],选择一个项目可查看项目内现有的图标
图标列表的上方有几个按钮,最左边的按钮可以选择以Unicode/Font class/Symbol等方式显示
鼠标指向任意图标,可以执行复制代码等相关操作
在Font class/Symbol模式中,图标代码一般为"icon-{图标名}",但是如果同时加入了多个同名的图标,那么后面加入的同名图标代码会以别的规则产生,为了方便在网页中使用,此时最好用鼠标指向该图标,编辑图标,指定一个合适的新代码(留意:不必输入icon-)。
以在线链接方式使用iconfont图标
在HTML文件中
- 登录iconfont网站,选择相应项目,切换到Font class模式,复制在线链接URL
- 在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中的图标非常简单方便
登录iconfont网站,选择相应的项目,切换到Symbol模式,点击[查看在线链接]按钮,复制该链接路径
在需要使用iconfont图标的组件内,添加以下代码(scriptUrl值为第1步复制的URL)。
const MyIcon = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成
});
注意:当添加/编辑/删除图标后,必须更新在线链接URL,然后将scriptUrl替换为新url
然后在需要添加图标的地方,添加与下面类似的代码即可:
<MyIcon type="icon-{图标名}"/>
type属性的值可直接通过在iconfont网站鼠标指向图标,然后复制代码获得。
以离线方式使用iconfont图标
待写...
使用iconfont图标的更多相关文章
- 如何引入iconfont图标与Element-UI组件
一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...
- veu——引入iconfont图标
我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...
- 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标
自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- 仿站-获取网站的所有iconfont图标
在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...
- Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...
随机推荐
- TestLink环境搭建及用例导入
以下是笔者亲身实践,精心挑选出来的比较好的博文: CentOS7下TestLink环境的部署 https://blog.csdn.net/fxsok244969309/article/details/ ...
- C# xml 读xml、写xml、Xpath、Xml to Linq、xml添加节点 xml修改节点
#region XDocument //创建XDocument XDocument xdoc2 = new XDocument(); XElement xel1= new XElement(" ...
- Exp4 恶意代码分析 20164313 杜桂鑫
1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...
- NFS服务器工作原理
一.NFS简介 NFS是Network File System的缩写,中文称为网络文件系统,它的主要功能是通过网络(一个局域网)让不同的主机系统之间可以共享文件或目录,NFS的客户端(一般为应用服务器 ...
- mysql安装密码策略插件
https://blog.csdn.net/kk185800961/article/details/79447754 注意linux安装密码策略的插件 validate_password.so
- php把网络图片转Base64编码。
/** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ function imgtob ...
- 断断续续Python看到现在
没有项目的支持 承认自己实践不足 但心怀梦想 我一定可以的
- c#关于var的介绍和用法
var关键字---根据初始化语句推断变量类型 功能: var关键字指示编译器根据初始化语句右侧的表达式推断变量的类型,推断类型可以是内置类型,匿名类型,用户定义类型,.NET Framework类库中 ...
- linux虚拟机长时间不用时间改回来的方法
1. 时间和时区 地理课上我们都学过格林威治时间(GMT), 它也就是0时区时间,但是我们在计算机中经常看到的是UTC,它是Coordinated Universal Time的简写, 虽然可以认为U ...
- MySql数据库时区异常,java.sql.SQLException: The server time zone value '?й???׼ʱ?' is unrecognized or represents more than one time zone.
JDBC访问MySql异常 Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException ...