使用iconfont图标
2024-10-11 05:39:35
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图标
待写...
最新文章
- 使用VS Code开发ASP.NET 5 应用程序
- HTML5 随机弹跳的小球
- 如何使用github搭建个人博客
- 部署Service Manager 2012遇到的2个问题
- delphi数据类型及占用的字节数 C++ 对应数据类型
- 数据转换成json传递
- (转)【深入浅出jQuery】源码浅析2--奇技淫巧
- 再次踩bug:遍历删除list(java.util.ConcurrentModificationException)
- 为什么Form.Timer的event handler在Form被Dispose之后还是被调到了?
- C# CheckedListBox控件的使用方法
- hdu5179(数位dp)
- Android开发模式之MVC,MVP和MVVM的简单介绍与区别
- 使用github pages搭建个人博客
- PHP字符过滤方法
- ISP PIPLINE (十五) AF
- hash 和pushState,replaceState
- 品尝阿里云容器服务:初步尝试ASP.NET Core Web API站点的Docker自动化部署
- SQL-常用命令
- Cobalt Strike深入使用
- Python repr() 函数