使用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中的图标可以在 图标库 中寻找. (上面 ...
随机推荐
- ExcelPackage 读取、导出excel
private static string GetString(object obj) { try { return obj.ToString(); } catch (Exception ex) { ...
- py3,休息时间玩点小把戏
100以内奇数: ls = [x for x in range(100) if x % 2 == 1] 100以内偶数: ls = list(x for x in range(100) if x % ...
- Python paramiko模块基本使用(一)
使用paramiko模块登录远程主机,对日志进行统计分析. import paramiko def batch_count(days, hours, ips, user, passwd, source ...
- python web编程之网络基础
1.TCP/IP协议 1)分层 应用层,传输层,网络层,接口层 2)Ip地址 3)域名 4)URL统一资源定位符 格式: [协议]://[主机]:[端口]/[路径]?[参数] 协议是HTTP,F ...
- linux 之网络命令
write 给用户发消息,用户必须在线,以ctrl+d保存结束 语法: write 用户 wall发广播信息(write all) 语法:wall 信息 mail 查看发送电子邮件 发送语法 : m ...
- jquery中添加元素append,prepend,before和after方法的区别
append:在元素内部的最后面添加元素,作为子元素. prepend:在元素内部的最前面添加元素,作为子元素. before:在元素的前边,作为兄弟元素添加. after:在元素的后边,作为兄弟元素 ...
- setCapture 使用方法
setCapture 可以捕获到 移动到浏览器外的鼠标事件. 例如拖动过程中,即使鼠标移动到了浏览器外,拖动程序依然可以执行! 作用就是把 把鼠标事件 捕获到 当前文档指定的对象! setCaptur ...
- SpringMVC中的一些注解
@Controller:表明该类是一个Controller: @RequestMapping(参数) :为类或者方法定义一个url @RequestParam(value = "id&quo ...
- kruskal(拓展)
kruskal是最小生成树的一种做法,即严格按照贪心思想将边从小到大排序,一个一个枚举能不能加入图中,知道生成一棵树,显然树为最小树. 鄙人觉得kruskal做法远不止如此,那种严格从小到大选边的做法 ...
- vuecli3.0安装搭建项目
1. npm install -g @vue/cli 2. vue create wechat Linter / Formatter 可以不选 检查空格的 //选择less //标准eslint // ...