遇到一个小问题：使用的是组件库，但是这个组件没有提供更改图标的接口，需要更改这个特定的图标，但是最好不更改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
