html - 转换 img 标签显示 FontAwesome 图标

Question

我有一个通过 <img> 输出图标的第三方产品带有通过 css 设置的背景图像的标记。

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

但是，我无法让它工作...有人知道这是否可行吗？

请看

.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

1. 您的 jsFiddle 没有正确导入 FontAwesome 库。
2. 您不能只复制粘贴字符并将其放入 content 中，您需要该特定图标的正确 unicode 值，即:\f06c<
3. 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 分支:https://jsfiddle.net/azizn/1y3jwnsg/

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

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