img 태그를 변환하여 FontAwesome 아이콘

나는 <img> 태그를 통해 css를 통해 배경 이미지 세트로 아이콘을 출력하는 타사 제품을 보유하고 있습니다.img 태그를 변환하여 FontAwesome 아이콘

아마 다른 HTML 태그 자체를 변경하는 자바 스크립트를 작성할 수 있지만 :before 및 content="{FontAwesomeText}"을 사용하여 FontAwesome 아이콘을 표시하도록 CSS를 변경하려고합니다.

그러나이 작업을 수행 할 수 없습니다.이 작업을 수행 할 수 있는지 아는 사람이 있습니까?

.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 라이브러리를 가져 오지 않았다 참조하십시오. \f06c는
img 의사 요소를 가질 수 있으며,에 대한 분류 형제 또는 부모를 사용
당신은 단지 문자를 붙여 복사 content 내부를 배치 할 수 없습니다, 당신은 특정 아이콘의 적절한 유니 코드 값을 필요로 아이콘을 클릭하고 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을 설정했을 때 작동했습니다. 더 이상 사과하지 않으면 사과드립니다. 그러나 문제는 첫 번째 스팬 (내가이 작업을했듯이)이었는데, 태그는 FontAwesome 콘텐츠를 표시하려고 시도하는 OP에서 작성했습니다. :) –

또한 누군가가 내 OP에서 새로운 작업을 제안했고 중요한 텍스트 중 일부가 삭제되었습니다 .... 왜 내가 교정하려고하는 "img"태그인지 분명하지 않은 이유는 무엇입니까? 내가 게시물을 업데이 트 htink ... 감사합니다 –

@ GlenHong 당신은 당신의 아이콘으로'img'를 바꾸시겠습니까? 'img'는 self-closing 태그이며 의사 요소를 가질 수 없습니다 ..'display : none; '을 사용하여 이미지를 숨기고 대신 조작 할 수있는 클래스 형제 또는 부모 이미지가 있습니까? – Aziz

img 태그를 변환하여 FontAwesome 아이콘

답변

관련 문제