正常情况下这个按钮是应该有个icon图标的,但是现在却不显示,html/css为:
<i class="iconfont icon-folder"></i> .icon-folder:before { content: "\e85e"; }
如果我把content改成"1",就正常显示
问题应该出在这个\e85e,"\e85e" 是一个 Unicode 转义序列,表示一个特定的字符。在这个转义序列中,\e
表示转义字符,后面跟着的 "85e" 是该字符的 Unicode 码点值。
根据所提供的 Unicode 转义序列 "\e85e",我们可以查找它对应的字符。很明显这个字符来自字体,因为我使用了icon font,css为
@font-face { font-family: "iconfont"; src: url(data:font/woff2;base64,xxx) format('woff2'), url(data:font/woff;base64,xxx) format('woff'), url(data:font/ttf;base64,xxx) format('truetype'); }
但是这个before的font-family为
异常的css和正常的css比对了,发现是一模一样的
对比i
标签,css也都一样
问题出在伪元素,出问题时css没有被继承inherited,
并且多了编辑器的主题样式fontello.css,这个影响不大,问题就应该出在这个css继承问题
问题大致定位到是shadowdom造成的,写了一个测试例,发现不是shadowdom的问题
再回顾下问题,是font-family没有被inherited造成的,仔细看了下出问题的css
是被编辑器的css覆盖了样式导致的,它会自动覆盖icon-
开头的class
因为我使用的是iconfont,所以不可能手动修改,登录到iconfont的后台,打开资源管理,找到我的项目
更新下我的ui库,重新build下,完美解决
[class^="icon-"]:before
和 [class*=" icon-"]:before
在提供的 CSS 选择器规则中,[class^="icon-"]:before
和 [class*=" icon-"]:before
是用来选择具有特定类名前缀的元素的 ::before
伪元素。
[class^="icon-"]:before
:这个选择器将选择具有以 "icon-" 开头的类名的元素的::before
伪元素。例如,如果有一个元素的类名为 "icon-star",那么它的::before
伪元素就会被选中。[class*=" icon-"]:before
:这个选择器将选择具有包含 " icon-" 的类名的元素的::before
伪元素。它可以匹配在类名中任何位置出现的 " icon-" 子串。例如,如果有一个元素的类名为 "menu icon-home",那么它的::before
伪元素就会被选中。
这些选择器通常用于添加样式或内容到具有特定类名前缀的元素的 ::before
伪元素上。通过使用这样的选择器,你可以针对特定的元素或图标进行样式设置,而不必为每个具体的元素单独编写样式规则。