iconfont图标扩展

分手后的思念是犯贱 2023-07-13 12:12 14阅读 0赞

以阿里巴巴的矢量图标库iconfont为例：[https://www.iconfont.cn/][https_www.iconfont.cn]  
JeecgBoot开发文档—Icon图标扩展方法：[http://doc.jeecg.com/1273896][http_doc.jeecg.com_1273896]  
阿里iconfont图标不能修改颜色的解决方案：[https://blog.csdn.net/weixin\_43297321/article/details/107621419][https_blog.csdn.net_weixin_43297321_article_details_107621419]

### SVG上传生成图标 ###

1、打开网页，点击**上传云端**按钮，进入上传页面，之后按照提示操作。  
![在这里插入图片描述][20200311223709240.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### 下载字体图标 ###

1、把想要的图标加入**购物车**。  
![在这里插入图片描述][20200311214032756.png]  
2、点击**下载代码**。  
![在这里插入图片描述][20200311214344589.png]  
3、解压后的文件列表。  
![在这里插入图片描述][20200311214507526.png]  
4、打开demo\_index.html，里面是我们下载的图标的编码及详细使用方法，可自行根据下面提示步骤来做。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
5、下面是引用的三种方式，分别是Unicode 引用、font-class 引用、Symbol 引用。

### 方式一：Unicode 引用 ###

> Unicode 是字体在网页端**最原始**的应用方式，特点是：  
> （1）兼容性最好，支持 IE6+，及所有现代浏览器。  
> （2） 支持按字体的方式去动态调整图标大小，颜色等等。  
> （3）但是因为是字体，所以**不支持多色**。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。  
> 注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式。

*  Unicode 使用步骤如下：

<table> 
 <tbody> 
  <tr> 
   <td align="left"> 第一步：拷贝项目下面生成的 @font-face代码<br><br> 第二步：定义使用 iconfont 的样式<br><br> 第三步：挑选相应图标并获取字体编码，应用于页面<br><br> （注意："iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。） </td> 
  </tr> 
 </tbody> 
</table>

1、把相关文件拷贝到libs这个文件夹下，（习惯性的把放置第三方工具的文件夹命名为libs）  
![在这里插入图片描述][20200311215357903.png]  
2、这是图标的字体编码。  
![在这里插入图片描述][20200311215636682.png]  
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、效果展示：  
![在这里插入图片描述][20200311220135230.png]

### 方式二：font-class 引用 ###

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

> 与 Unicode 使用方式相比，具有如下特点：  
> 兼容性良好，支持 IE8+，及所有现代浏览器。  
> 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。  
> 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。  
> 不过因为本质上还是使用的字体，所以**不支持多色**。

*  使用步骤如下：  
    第一步：引入项目下面生成的 fontclass 代码：  
    `<link rel="stylesheet" href="./iconfont.css">`  
    第二步：挑选相应图标并获取类名，应用于页面：  
    `<span class="iconfont icon-xxx"></span>`  
    （注意：" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。）

1、link完.css文件后，查看图标编码，获取类名。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
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、效果展示：  
![在这里插入图片描述][20200311222316600.png]

### 方式三：Symbol 引用 ###

这是一种全新的使用方式，应该说这才是未来的主流，也是**平台目前推荐的用法**。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

> **支持多色图标了**，不再受单色限制。  
> 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。  
> 兼容性较差，支持 IE9+，及现代浏览器。  
> 浏览器渲染 SVG 的性能一般，还不如 png。

*  使用步骤如下：  
    第一步：引入项目下面生成的 symbol 代码：  
    `<script src="./iconfont.js"></script>`  
    第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

<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>

![在这里插入图片描述][20200311223454935.png]

以上就是全部内容啦。

[https_www.iconfont.cn]: https://www.iconfont.cn/
[http_doc.jeecg.com_1273896]: http://doc.jeecg.com/1273896
[https_blog.csdn.net_weixin_43297321_article_details_107621419]: https://blog.csdn.net/weixin_43297321/article/details/107621419
[20200311223709240.png]: https://img-blog.csdnimg.cn/20200311223709240.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311223728742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200311214032756.png]: https://img-blog.csdnimg.cn/20200311214032756.png
[20200311214344589.png]: https://img-blog.csdnimg.cn/20200311214344589.png
[20200311214507526.png]: https://img-blog.csdnimg.cn/20200311214507526.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020031121452950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200311215357903.png]: https://img-blog.csdnimg.cn/20200311215357903.png
[20200311215636682.png]: https://img-blog.csdnimg.cn/20200311215636682.png
[20200311220135230.png]: https://img-blog.csdnimg.cn/20200311220135230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200311230343841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200311222316600.png]: https://img-blog.csdnimg.cn/20200311222316600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200311222936920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200311223454935.png]: https://img-blog.csdnimg.cn/20200311223454935.png