【CSS】css快速更改某个字体图标，使用content插入字符

遇到一个小问题：使用的是组件库，但是这个组件没有提供更改图标的接口，需要更改这个特定的图标，但是最好不更改dom

解决办法

由于系统已经使用了这个组件库，那么就有了他的图标内容，可以先到组件库官网找到需要更改的图标，在官网界面打开控制台，获取需要的图标字符

获取图标字符之后，可以使用相同的方式替换伪元素。可以看到我把下面向下的图标名的内容换成了向上的箭头。

  ::ng-deep .ui-panelmenu-icon.pi-chevron-down::before {
    content: "\e903";
  }

css3中的content字符编码

content:"\21e0"; //获取字符集图标 斜杠就是转义 不过有一些图标在浏览器直接是有一些差别

‘\21e0’是如何被显示为图标的？

这里用到了WebFont，也就是一种“字体”，这种字体包含了矢量图标，诸如 ‘\f33f’就是对应矢量图标的编码。
你这段代码并不全，css里应该还包含这段：

@font-face {
	font-family: 'XXX'; /* 给你的自定义WebFont命名 */
	src:url('xxx.eot');
	src:url('xxx.eot?#iefix') format('embedded-opentype'),
		url('xxx.woff') format('woff'),
		url('xxxn.ttf') format('truetype'),
		url('xxx.svg#micon') format('svg');
	font-weight: normal;
	font-style: normal;
}

它的好处是不必再使用css spirit切图了，而且作为矢量图可以以任意你想要的尺寸显示，另外，这种方法兼容性很好（ie6 7 可以显示，前提是你为不同的浏览器准备了不同的字体文件格式，如eot、woff、ttf、svg）。

直接将icon的unicode写在html上不就成了，为什么还得费劲加伪元素:before呢？

从这段代码看，你知道’\f309’、’\f33f’分别代表的是哪些图标么？
别说你看不出来，即使WebFont的作者也看不出来啊，这些unicode编码显然不如html的class或者id语义化。如果在一个大型网站上多处复用这些font icon，那是相当要命的（每用一次就去查一查？），因此，就出现了一种解决方案：

HTML

<i class="icon icon_open"></i>

CSS

@font-face{
	font-family: 'MyFont'; /* 给你的自定义WebFont命名 */
	src:url('xxx.eot');
	src:url('xxx.eot?#iefix') format('embedded-opentype'),
		url('xxx.woff') format('woff'),
		url('xxxn.ttf') format('truetype'),
		url('xxx.svg#micon') format('svg');
	font-weight: normal;
	font-style: normal;
        ...
}
.icon{
        font-family: 'MyFont';
        speak:none; /* 无障碍阅读所需要的，告诉屏幕阅读器不要读这个字符 */
        font-size:14px;
        font-variant:normal;
        font-weight:normal;
        text-transform: none;
        ...
}
.icon_open:before{
        content:"\f001"; /* 相应图标的编码 */
        ...
}

然后你只要在任何你想使用该图标的地方插入HTML即可：

<nav>
   <a href="open.html"><i class="icon icon_open"></i>Open</a>
</nav>

📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！

https://segmentfault.com/a/1190000018143558