iconfont图标扩展
以阿里巴巴的矢量图标库iconfont为例：https://www.iconfont.cn/
JeecgBoot开发文档—Icon图标扩展方法：http://doc.jeecg.com/1273896
阿里iconfont图标不能修改颜色的解决方案：https://blog.csdn.net/weixin_43297321/article/details/107621419
SVG上传生成图标
1、打开网页，点击上传云端按钮，进入上传页面，之后按照提示操作。
下载字体图标
1、把想要的图标加入购物车。
2、点击下载代码。
3、解压后的文件列表。
4、打开demo_index.html，里面是我们下载的图标的编码及详细使用方法，可自行根据下面提示步骤来做。
5、下面是引用的三种方式，分别是Unicode 引用、font-class 引用、Symbol 引用。
方式一：Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
（1）兼容性最好，支持 IE6+，及所有现代浏览器。
（2） 支持按字体的方式去动态调整图标大小，颜色等等。
（3）但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式。
- Unicode 使用步骤如下：
| 第一步：拷贝项目下面生成的 @font-face代码 第二步：定义使用 iconfont 的样式 第三步：挑选相应图标并获取字体编码，应用于页面 （注意："iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。） |
1、把相关文件拷贝到libs这个文件夹下，（习惯性的把放置第三方工具的文件夹命名为libs）
2、这是图标的字体编码。
3、代码展示：
<style>/* 第一步：拷贝项目下面生成的 @font-face *//* 注意：要把相关文件放到url指定的路径下 *//* libs一般都是用来放第三方工具包的，自己新建一个 */@font-face {font-family: 'iconfont';src: url('./libs/iconfont.eot');src: url('./libs/iconfont.eot?#iefix') format('embedded-opentype'),url('./libs/iconfont.woff2') format('woff2'),url('./libs/iconfont.woff') format('woff'),url('./libs/iconfont.ttf') format('truetype'),url('./libs/iconfont.svg#iconfont') format('svg');}/* 第二步：定义使用 iconfont 的样式 *//* 注意："iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。*/.iconfont {font-family: "iconfont" !important;font-size: 36px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 然后我们还可以另外设置改变颜色 */span{color: teal;}
style>
<span class="iconfont">span>度假
<span class="iconfont">span>婚纱
<span class="iconfont">span>热气球 4、效果展示：
方式二：font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以不支持多色。
- 使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
第二步：挑选相应图标并获取类名，应用于页面：
（注意：" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。）
1、link完.css文件后，查看图标编码，获取类名。
2、代码展示：
<head><link rel="stylesheet" href="./libcss/iconfont.css"><style>/* 还可以重置某些样式*/.iconfont{color: tomato;font-size: 36px;}style>
head>
<body><span class="iconfont icon-dujia">span>度假 <span class="iconfont icon-hunsha">span>婚纱 <span class="iconfont icon-reqiqiu">span>热气球
body>
3、效果展示：
方式三：Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
- 使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
第二步：加入通用 CSS 代码（引入一次就行）：
第三步：挑选相应图标并获取类名，应用于页面：
<head><script src="./libjs/iconfont.js">script><style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;/* 下面是我自己加的 *//* color:violet; 因为symbol支持多彩图标，所以，这里不能直接改变色彩*/font-size: 36px;}style>
head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dujia">use>svg>度假<svg class="icon" aria-hidden="true"><use xlink:href="#icon-hunsha">use>svg>婚纱<svg class="icon" aria-hidden="true"><use xlink:href="#icon-reqiqiu">use>svg>热气球
body>
以上就是全部内容啦。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！