iconfontのsymbol的使用
2024-09-02 11:39:31
iconfont三种方式的优缺点
unicode
优点:
1.兼容性最好,支持ie6+
2.支持按字体的方式去动态调整图标大小,颜色等等
缺点:
1.不支持多色图标
2.在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
3.不直观,看unicode码很难分辨什么图标
fontclass
1.兼容性良好,支持ie8+
2.相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么
symbol
1.支持多色图标了,不再受单色限制
2.支持像字体那样通过font-size,color来调整样式。
3.支持 ie9+
4.可利用CSS实现动画
5.减少HTTP请求
6.矢量,缩放不失真
7.可以很精细的控制SVG图标的每一部分
下面是使用symbol方式的详细步骤
使用步骤
- 进入https://www.iconfont.cn/选择一个你喜欢的图标库,将图标加入购物车。
- 点击右上角购物车打开购物车
- 加入项目,没有就新建一个项目,点击确定,跳转到我的项目
- (菜单栏->图标管理->我的项目),点击下载到本地
- 把如图js文件移动到项目中
- 使用 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>icon</title>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-food-macaron"></use>
</svg>
<script src="./icon/iconfont.js"></script>
</body>
</html>
注意xlink:href的值前面带有
#
,在我的项目中,每个图标对应一个id。
补充
快速将多个图标添加到购物车,控制台输入如下代码执行
var icon=document.getElementsByClassName('icon-gouwuche1');
for(var i=0;i<icon.length;i++){
icon[i].click();
}
最新文章
- Link To Sql简单
- RNN 入门教程 Part 2 – 使用 numpy 和 theano 分别实现RNN模型
- ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步
- 我的web框架设计
- 初学画布canvas的chapter2
- C# 检测程序运行时间的方法,Stopwatch类
- shell+curl监控网站页面(域名访问状态),并利用sedemail发送邮件
- Shipyard远程API
- iOS常用正则表达式验证(手机号、密码格式、身份证号等)
- hdu-5703 Desert(水题)
- 对html进行SEO的一点点总结
- .Net Framwork类库
- hibernate Java 时间和日期类型的 Hibernate 映射
- 微信支付开发+{ping++}微信支付托管
- Chrome调试nodejs
- jQuery 设置select默认选中问题
- Kafka Streams 剖析
- javaRMI详解
- 初级c++编码规范
- RBF:RBF基于近红外光谱的汽油辛烷值含量预测结果对比—Jason niu
热门文章
- SQL Server中 SET 和 SELECT 赋值有什么区别?
- spring.net的简单使用(一)入门
- 教你如何在Deepin搭建Qt开发环境(sudo apt-get install qt5-default qt5-qmake g++ qtcreator,也许对龙芯版的Deepin也有用)
- MinGW 编译 libsndfile-1.0.25(只要有 MSYS,./configure make make install 就行了)
- Ubuntu Linux服务器搭建SSL/TLS(https)(在StartSSL可以得到免费证书)
- Qt 5.6.0 动态编译(VS2013 x86 target xp openssl icu webkit)
- 完全卸载mysql免安装版
- FMX中实现PostMessage的方法
- QT---Winsocket获取网关(Gateway) 主机IP等信息
- 再谈Delphi关机消息拦截 -- 之控制台程序 SetConsoleCtrlHandler(控制台使用回调函数拦截,比较有意思)