我有一个通过 <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;
}
最佳答案
- 您的 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 分支:https://jsfiddle.net/azizn/1y3jwnsg/
注意:在 content:''
字符串的末尾添加 \00a0
以强制使用空格以保持一致性。
图标同时应用于x-tree-icon-leaf
和x-tree-icon-text
。当x-tree-icon-leaf
是img
标签时,它会被隐藏。
关于html - 转换 img 标签显示 FontAwesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38986182/