1.阿里矢量图加入项目，选择iconfont下载 2.选择iconfont.css，iconfont.ttf放入static目录  3.修改iconfont,url注意添加 ~@  不然找不到 4.app.vue全局引入 5.页面中使用 <viewclass='examexam-video'></view>

引言在iconfont图标字体库详细介绍一文中介绍了iconfont图标字体库的三种使用方法，分别是1.unicode引用2.font-class引用3.symbol引用。其中只有symbol引用的方式才能保留图标的色彩。但是如果我们想改变图标的颜色，那么该如何做呢？解决方法以React为例，在项目中，封装

先参考这个官网的示例:官网示例：通过设置createFromIconfontCN方法参数对象中的scriptUrl字段，可以使用 iconfont.cn 项目中的图标。在iconfont.cn网站使用symbol方式生成在线链接。 但官网的说明有个问题，就是全部使用的是网络引用，有时候我们需要的环境可能并不是一个有

概述图标库在前端开发中应用十分广泛，图标库不仅会丰富美化界面的展示，语义化的图标库更能简洁明了地向用户传达某些信息，比如功能的特性和作用，引导用户，极大提高系统的易用性。在没有UI设计师的情况下，作为开发也可以自己打造图标库。而iconfont就是一种很好的选择。iconfon

 当使用uniapp并尝试引入阿里iconfont的彩色图标时，发现图标显示为黑白。原因是Fontclass模式不支持彩色图标。解决方法是下载Symbol模式的SVG文件，使用iconfont-tools进行转换，然后在项目中全局引入转换后的CSS文件，最终在组件中正确显示彩色图标。解决步骤如下：1、选择想要的

Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在iconfont中，只

关于图标，前端工程师接触的不算少的了。虽然不少公司都会有自己的前端ui工程师设计图标，各类ui库也会有自己的图标库，但如果你是个人开发或者是学校的同学，再或者你们没有ui设计图标，那么你就能运用到我的方案。官网地址：iconfont-阿里巴巴矢量图标库这个不用担心，注册就能免费使用，

想必大家都知道这个图标库的图标还是很多的‘大家应该都也用过 最进开发Taro+nut-ui的H5移动端的时候我发现一些图标我在组件库中找不到我看到了nut-ui中还有另一种使用方法这个叫做自定一图标、我来用实际操作代码来介绍一下这个怎么使用 我总结文章

阿里巴巴矢量图标库：https://www.iconfont.cn/第一步：生成fontclass地址将喜欢的icon加入购物车将购物车中的图标添加至项目获取项目的Fontclass地址，打开连接，并复制内容第二步：引入字体将Fontclass内容粘贴到微信小程序项目中assets/iconfont/iconfont.axss  （后缀名根据项

准备图标图标可以在iconfonthttps://www.iconfont.cn/下载规格为16*16png即可重命名一个合适的名字，这里下载了两个，一个做为Item,一个为ItemRevision,如图：打开BMIDE上传图标找到对应类型修改并部署需要设置Item,itemRevision（有需要表单类型也可以修改图标）登陆查

直接上代码，有任何问题直接留言，我们一起讨论  @echooffSETdirName=替换成压缩包解压后希望叫的名字SETOldPattern=font_*_*rmdir/q/s"删除原来的iconfont文件夹，这里替换成原来的文件夹的地址"curl--output%这里的地址是你想把从iconfont上下载下来的安装包

Figma中做好图标，导出svg，上传iconfont，经常出现以下问题原因是：一大佬文章中有提到figma的填充模式为“even-odd”，iconfont识别不了这种格式解决方案：运用Figma插件FillRuleEditor 以下是具体操作步骤1、运用布尔运算绘制图标；2、右键Outlinestroke转曲，防止图标放大缩小变

前言开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。支持程度比较好，甚至IE低版本的浏览器也能支持。字体的常见格式不同浏览器所支持的字体格式是不一样的，我

flutter项目中引入了iconfont.ttf之后，调试时正常，打包就报错。 网上有的说法是：使用了iconfont.ttf里面不存在的icon，但是我使用的都是在iconfont.tt文件中的icon。 我的情况是使用了switch  case给IconData的codePoint动态赋值，下面这种情况就是打包报错的 解决办法是

1.首先去阿里巴巴矢量图标库找到自己需要的图标，比如2.鼠标移到图标上，有个购物车的小图标(添加入库)，然后点击右上角的购物车小图标，弹出弹框，选择添加至项目3.去资源管理里面找到我的项目，就可以看到刚才咱们自己添加的图标4.可以在项目设置中设置自己需要的配置5.点击下载至

使用svg代替iconfont的好处：iconfont无法显示复杂的图形；svg是矢量图；svg标签内部可以添加title和desc标签，有利于SEO和无障碍阅读。svgsprite图：将若干个svg图标组合到一个文件上，可以减少网络请求的次数，通过#获取指定的图标：<svgclass="icon"><usexlink:href="img/sprit

1.方式一代码如下import{createFromIconfontCN}from'@ant-design/icons-vue';constIconFont=createFromIconfontCN({scriptUrl:newURL('./assets/font/iconfont.js',import.meta.url).href});app.component('IconFont',IconFont);

1.通过iconfont 网站选择对应图表加入购物车，然后添加到自己对应项目中，现在至本地。2.解压下载到本地的文件 3.进入 transfonter 后，点击Addfonts按钮，将上图中红色框中的文件上传上去，勾选启用 Base64encode ，点击Convert按钮，完成后点击下载Download 4.解压转

在使用Layui进行开发时，会使用：<iclass="layui-icon">&#xe60c;</i>或者<iclass="layui-iconlayui-icon-face-smile"style="font-size:30px;color:#1E9FFF;"></i>进行图标的引入，但是官方给的图标毕竟有限，有时候没有自己想要的，但在阿里巴巴矢量图标库（ht