iconfont不显示 元素当中没有::before是什么原因导致的 有些的可以显示 有些的不可以

通常情况下，如果 Iconfont 图标无法在网页中显示，可能是以下几个原因导致的：

1. 未正确引入 Iconfont 字体文件或 CSS 文件。
2. 字体文件或 CSS 文件路径不正确。
3. 网络原因导致字体文件或 CSS 文件无法加载。
4. 字体文件格式不正确或损坏。
5. 未正确设置 Iconfont 的字体家族和字体大小。
6. 元素的伪元素 ::before 未正确设置 content 属性。
7. 元素的伪元素 ::before 的样式设置不正确。

对于你提到的元素没有 ::before 的情况，可能是因为你没有正确设置元素的伪元素 ::before，并给它设置了 content 属性。只有设置了 content 属性，::before 才能生效并显示 Iconfont 图标。你需要检查一下代码中是否有如下设置：

.iconfont::before {
  content: "\e123"; /* 这里的代码是 Iconfont 包含的 Unicode 编码 */
  font-family: "iconfont"; /* 这里是设置 Iconfont 的字体家族 */
  font-size: 16px; /* 这里是设置 Iconfont 的字体大小 */
}

如果以上代码设置正确，但 Iconfont 仍无法显示，可能是其他问题导致的。你可以逐个排除以上提到的原因，找出具体原因并解决。

相关问题

iconfont不显示没有::before

如果 `iconfont` 不显示没有 `::before`，可能是以下原因导致：

1. 没有正确引入 `iconfont` 的 CSS 文件。
2. `iconfont` 的 CSS 文件中没有定义 `::before` 的样式。
3. `iconfont` 的字符编码不正确。

解决方法：

1. 确认已经正确引入 `iconfont` 的 CSS 文件。
2. 确认 `iconfont` 的 CSS 文件中有定义 `::before` 的样式。
3. 确认 `iconfont` 的字符编码是否正确，可以通过在 HTML 中使用 `&#x****;` 的方式来显示 `iconfont`，其中 `****` 为字符的 Unicode 编码。如果能够正常显示，那么就是字符编码的问题。

另外，有些浏览器可能需要加上 `-webkit` 前缀才能正常显示 `::before`，可以在 CSS 文件中添加以下代码：

.iconfont::before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

after伪类不显示_CSS中的::after ::before与原理详解

在CSS中，::before和::after是一种伪元素，它们可以在选定元素的内容前面或后面插入生成的内容，而且这些内容是完全由CSS控制的，不会影响到文档的实际内容。这两个伪元素通常用于添加装饰性的内容，比如图标、箭头、边框等。

使用::before和::after伪元素时，需要设置它们的content属性，来指定要显示的内容。同时，它们也可以应用任何CSS属性，比如color、background、font-size等，这些属性将会影响到伪元素的样式。

关于为什么使用::before和::after伪元素，原理如下：

1. 简化HTML结构：使用::before和::after伪元素可以在不增加HTML代码的情况下，向选定元素添加内容，从而简化HTML结构。

2. 可以将样式应用于选定元素的特定部分：通过使用::before和::after伪元素，可以将样式应用于选定元素的特定部分，而不必更改原始HTML代码。

3. 可以将多个样式应用于选定元素：通过使用::before和::after伪元素，可以将多个样式应用于选定元素，从而增强了样式的复杂性和灵活性。

需要注意的是，使用伪元素时，需要使用双冒号(::)而不是单冒号(:)。虽然有些浏览器支持单冒号语法，但它并不是标准的语法。