Iconfont

背景 ant-design 官网提供了一部分图标，但种类并不能满足实际开发，需要去阿里图标库挑选些的图标来使用。 问题 使用过 Antd 的应该知道上面反馈成功的图标显示有误，应该是一个蓝色的√。 思路 起初以为是 antd 的样式没有引进来，可是想想又不对，反馈失败图标 —— 红色×是可以显示正常的，后来点了下整个网站发现只有反馈成功图标显示有问题，F12 打开控制台查源码如下： 可以看到，这里用到一个伪类选择器。内容为：'\E630'。 在此之前，我刚好去阿里图标库 Iconfont 自己挑选了一批图标，下载到本地，也就是这几个文件： 打开 iconfont.css 文件，发现果然与其中一个图标的 unicode 冲突了。而冲突的那个图标的样子就是最上面那张图的图形。 iconfont.css ... .anticon-stop:before { content: "\E630"; } ... 解决 直接删除本地 iconfont.css 文件中冲突的那个图标是没用的，需要重新去阿里图标库，删除冲突的那个图标，重新下载。 来源： oschina 链接： https://my.oschina.net/u/3500483/blog/1554907

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在看别人 github 项目的时候，看到了 iconfont，百度了一下是阿里的图标库，这个很容易理解，但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件，对于这些新东西感到有些陌生，在经过一番查找之后有所得，整理思路，记录于此。 一、Iconfont 1. 概述 在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。 在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给人新知，现在我知道了它们只是一种字体，类似于“宋体”、“楷体”这种。如果我们要使用它们，也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法，刚兴趣的可以自行阅读 @font-face 用法 。 2. Iconfont 介绍 Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。 这种模式的一大优点就是只挑选出需要的图标