Преобразование img-тега для отображения значка FontAwesome

У меня есть сторонний продукт, который выводит значок с помощью тега <img> с фоновым изображением, установленным через css.Преобразование img-тега для отображения значка FontAwesome

Возможно, я мог бы написать javascript, чтобы изменить сам тег html на другой, но я бы скорее изменил css, чтобы отобразить значок FontAwesome, используя :before и 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/

источник

2016-08-16 Glen Hong

Ваш jsFiddle не правильно импортировать библиотеку FontAwesome.
Вы не можете просто скопировать вставить символ и поместите его в content, вам необходимо правильное значение Юникода этой конкретной иконки, которая: \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/

Примечание: Добавить \00a0 в конце content:'' строки, чтобы заставить пространство для последовательности ,

Значок применяется к x-tree-icon-leaf и x-tree-icon-text в то же время. Когда x-tree-icon-leaf является тегом img, он будет скрыт.

источник

2016-08-17 00:12:41 Aziz

Привет ... когда я настраивал FontAwesome как внешнюю ссылку, в которой он работал. Извините, если это уже не так. Однако проблема была не в первом прогоне (поскольку у меня была эта работа) это тег , как написано в OP, которое Im пытается отобразить содержимое FontAwesome :) –

Также должен извиниться, что кто-то предложил новую работу на моем OP и некоторые важные тексты были удалены .... почему же не ясно, что это был тег «img», который я пытался исправить. Я htink Я обновил сообщение ... Спасибо –

@GlenHong вы хотите заменить «img» на свой значок? 'img' является самозакрывающимся тегом и не может иметь псевдоэлементы. Есть ли у него классифицированный родственный или родительский образ, который можно манипулировать вместо этого, скрывая изображение с помощью' display: none? '? – Aziz

Преобразование img-тега для отображения значка FontAwesome

ответ

Смежные вопросы