Question

我有第三方产品，通过<img>标签输出图标，并通过css设置背景图片。

我可能会写一些javascript来将html标签本身更改为不同的东西，但我宁愿更改css以使用:before和content="{FontAwesomeText}"显示FontAwesome图标。

但是，我无法让这个工作......有人知道这是否可以做到这一点？

请参阅

.x-tree-icon-leaf:before {
    content: "";
    font-size: 0.6em;
    position: relative;
    top: -3px;
}

.x-tree-icon-leaf {
  font-family: FontAwesome;
  width: 20px;
  height: 20px;
  display: inline-block;
  color: #5fa2dd;
}

https://jsfiddle.net/uz9q6m33/

Answer 1

您的jsFiddle没有正确导入FontAwesome库。
您不能只复制粘贴字符并将其放在content内，您需要该特定图标的正确unicode值，即：\f06c
img不能包含伪元素，使用分类的兄弟或父级作为图标，并使用display: none隐藏图像。

工作代码：

.x-tree-icon-leaf, .x-tree-icon-text::before {
  font: normal normal normal 14px/1 "FontAwesome";
  display: inline-block;
  color: #5fa2dd;
}

.x-tree-icon-leaf::before, .x-tree-icon-text::before {
    content: "\f06c\00a0";
    font-size: 1em;
    position: relative;
    top: -1px;
}

img.x-tree-icon-leaf { display: none; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<!-- working with normal span -->
<div> <span class="x-tree-icon-leaf"></span> <span>Hello</span> </div>

<!-- hiding image then applying icon to text-span -->
<div> <img class="x-tree-icon-leaf"> <span class="x-tree-icon-text">Hello</span> </div>

jsFiddle fork：https://jsfiddle.net/azizn/1y3jwnsg/

注意：在\00a0字符串的末尾添加content:''以强制空间保持一致。

该图标同时应用于x-tree-icon-leaf和x-tree-icon-text。当x-tree-icon-leaf是img标记时，它将被隐藏。

转换img标签以显示FontAwesome图标

1 个答案: