轉換img標籤以顯示FontAwesome圖標

我有一個第三方產品，通過<img>標籤輸出一個圖標，通過css設置背景圖像。轉換img標籤以顯示FontAwesome圖標

我大概可以編寫一些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/

來源

2016-08-16 Glen Hong

你的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標記時，它將被隱藏。

來源

2016-08-17 00:12:41 Aziz

嗨...當我設置FontAwesome作爲外部參考它工作。如果不是這種情況，我們抱歉。但是，問題不是第一個跨度（因爲我有這個工作），它是標籤寫在OP，我試圖顯示FontAwesome內容:) –

也必須道歉有人提出了我的OP的新工作和一些重要文本已被刪除......爲什麼不清楚它是我正在嘗試糾正的「img」標籤。我htink我已經更新了帖子...謝謝 –

@GlenHong你想用你的圖標替換一個'img'？ 'img'是一個自我關閉的標籤，不能有僞元素..是否有一個分類的兄弟姐妹或該圖像的父母，可以用'display：none;'來隱藏圖像而不是操作它？ – Aziz

轉換img標籤以顯示FontAwesome圖標

回答

相關問題