iconfont图标使用方法

unicode 引用

unicode是字体在网页端最原始的应用方式，特点是：
1.兼容性最好，支持ie6+，及所有现代浏览器
2.支持按字体的方式去动态调整图标大小，颜色等等
3.但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
使用步骤：
①拷贝项目下面生成的font-face
②定义使用iconfont的样式

.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

③挑选相应图标并获取字体编码，应用于页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iconfont</title>
</head>
<style>@font-face {font-family: 'iconfont';  /* Project id 3384469 */src: url('//at.alicdn.com/t/font_3384469_jwk5kycio6p.woff2?t=1652016923469') format('woff2'),url('//at.alicdn.com/t/font_3384469_jwk5kycio6p.woff?t=1652016923469') format('woff'),url('//at.alicdn.com/t/font_3384469_jwk5kycio6p.ttf?t=1652016923469') format('truetype');}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
</style>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</body>
</html>

运行结果：

font-class 引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
1.兼容性良好，支持ie8+，及所有现代浏览器
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用
4.不过因为本质上还是使用的字体，所以多色图标还是不支持的
使用步骤：
①拷贝项目下面生成的fontclass代码
②挑选相应图标并获取类名，应用于页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iconfont</title><link rel="stylesheet" href="//at.alicdn.com/t/font_3384469_jwk5kycio6p.css">
</head>
<body><i class="iconfont icon-a-yuzhouxingxixingqiutaikong"></i><i class="iconfont icon-yuzhouxingqiu-10"></i><i class="iconfont icon-yuzhouxingqiu-16"></i>
</body>
</html>

运行结果：

symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
1.支持多色图标了，不再受单色限制
2.通过一些技巧，支持像字体那样，通过font-size，color来调整样式
3.兼容性较差，支持 ie9+，及现代浏览器
4.浏览器渲染svg的性能一般，还不如png
使用步骤：
①拷贝项目下面生成的symbol代码
②加入通用css代码(引入一次就行)

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

③挑选相应图标并获取类名，应用于页面
注意：在添加类名前加上"#"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iconfont</title><script src="//at.alicdn.com/t/font_3384469_jwk5kycio6p.js"></script>
</head>
<style>.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-yuzhouxingxixingqiutaikong"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yuzhouxingqiu-10"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yuzhouxingqiu-16"></use></svg>
</body>
</html>

运行结果：

设置浏览器icon图标

只需要加一行代码即可：<link rel="icon" href="xxx.ico">

iconfont图标相关推荐

Swift使用iconfont图标
iconfont怎么在iOS中使用了什么是iconfont? 简而言之就是将图标用文字(通过编码)字体的形式显示. 优点:减少项目体积包, 减少切2倍图和3倍图 , 各设备显示效果都不错, 可 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF 如何将IconFont图标转成Geometry
之前每次使用IconFont图标,都要去下载一个png图片,每次颜色什么的改了,都要重新下载,太苦逼了. 现在好了,终于找到如何方便快速地使用IconFont图标了. 是应该的演示如何从IconFon ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
正文工具链接: iconfont图标一键下载浏览器插件(2000+图标一秒下载打包) 示例链接: iconfont在vue3中按需使用和编译打包示例说明在vue3项目中使用iconfont图标是 ...
iconfont图标无法显示的问题
iconfont图标无法显示的问题刚开始用icon font图标库不是很熟悉,踩了一些坑,希望分享出来能给新手们带来一些帮助从官网上下载图标至本地后,放到项目里面要注意一下两点: 1.路径问题找 ...

iconfont图标

目录

iconfont图标使用方法

unicode 引用

font-class 引用

symbol 引用

设置浏览器icon图标

iconfont图标相关推荐

最新文章

热门文章