[√]shadowdom里面的i标签icon不显示,元素覆盖导致

简介: [√]shadowdom里面的i标签icon不显示,元素覆盖导致

image.png

正常情况下这个按钮是应该有个icon图标的,但是现在却不显示,html/css为:

<i class="iconfont icon-folder"></i>
.icon-folder:before {
  content: "\e85e";
}

如果我把content改成"1",就正常显示

image.png

问题应该出在这个\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为

image.png

异常的css和正常的css比对了,发现是一模一样的

对比i标签,css也都一样

image.png

问题出在伪元素,出问题时css没有被继承inherited,

image.png

并且多了编辑器的主题样式fontello.css,这个影响不大,问题就应该出在这个css继承问题

image.png

问题大致定位到是shadowdom造成的,写了一个测试例,发现不是shadowdom的问题

再回顾下问题,是font-family没有被inherited造成的,仔细看了下出问题的css

image.png

是被编辑器的css覆盖了样式导致的,它会自动覆盖icon-开头的class

因为我使用的是iconfont,所以不可能手动修改,登录到iconfont的后台,打开资源管理,找到我的项目

image.png

更新下我的ui库,重新build下,完美解决

[class^="icon-"]:before[class*=" icon-"]:before

在提供的 CSS 选择器规则中,[class^="icon-"]:before[class*=" icon-"]:before 是用来选择具有特定类名前缀的元素的 ::before 伪元素。

  1. [class^="icon-"]:before:这个选择器将选择具有以 "icon-" 开头的类名的元素的 ::before 伪元素。例如,如果有一个元素的类名为 "icon-star",那么它的 ::before 伪元素就会被选中。
  2. [class*=" icon-"]:before:这个选择器将选择具有包含 " icon-" 的类名的元素的 ::before 伪元素。它可以匹配在类名中任何位置出现的 " icon-" 子串。例如,如果有一个元素的类名为 "menu icon-home",那么它的 ::before 伪元素就会被选中。

这些选择器通常用于添加样式或内容到具有特定类名前缀的元素的 ::before 伪元素上。通过使用这样的选择器,你可以针对特定的元素或图标进行样式设置,而不必为每个具体的元素单独编写样式规则。

目录
相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
658 0
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1642 0
|
6月前
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
893 2
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
640 3
|
4月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
50 1
|
4月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
198 1
|
4月前
|
前端开发
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
110 0
|
4月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
531 0
|
6月前
|
搜索推荐 前端开发 UED
元素的alt和title属性相关细节知识
元素的alt和title属性相关细节知识