CSS를 통해 텍스트 왼쪽에 이미지 추가

Question

CSS를 통해 일부 텍스트에 이미지를 추가하려면 어떻게해야합니까?

나는이있어 :

<span class="create">Create something</span> 

나는 CSS를 사용하여 그 왼쪽에 16 × 16 이미지를 추가 할 수 있습니다. 이 가능 또는 난 그냥 수동과 같이 이미지를 추가해야합니다 :

<span class="create"><img src="somewhere"/>Create something</span> 

차라리 수동으로 내가 CSS를 통해 그것을 할 싶어 왜 모든 장소를 변경할 필요가 없습니다 것입니다.

감사합니다.

Answer 1

.create 
{ 
background-image: url('somewhere.jpg'); 
background-repeat: no-repeat; 
padding-left: 30px; /* width of the image plus a little extra padding */ 
display: block; /* may not need this, but I've found I do */ 
} 

원하는 결과를 얻을 때까지 여백과 여백을두고 재생하십시오. "배경 위치"로 배경 이미지 (Tom Wright에게 끄덕임)를 표시하거나 "배경"(link to w3)을 완전히 정의하여 재생할 수도 있습니다. 모든 최신 브라우저 및 IE8 +에서

.create:before { 
content: url(image.png); 
} 

작품 :

.create 
{ 
    margin: 0px; 
    padding-left: 20px; 
    background-image: url('yourpic.gif'); 
    background-repeat: no-repeat; 

} 

Answer 2

같은 것을보십시오.

편집

이 있지만 대형 사이트에 사용하지 마십시오. : before 의사 요소는 성능면에서 끔찍합니다.

Answer 3

아주 간단한 방법 :

Answer 4

이

.create:before{ 
    content: ""; 
    display: block; 
    background: url('somewhere.jpg') no-repeat; 
    width: 25px; 
    height: 25px; 
    float: left; 
}