CSS의 버튼 옆에 아이콘 추가하기

-3

나는 부트 스트랩이있는 CSS에서 "사소한 것"으로 뭔가를하려하지만 행운이 없다. 누구든지 내 양식 버튼 옆에 배경이있는 아이콘을 추가하는 방법을 도와 줄 수 있습니까?CSS의 버튼 옆에 아이콘 추가하기

enter image description here

<form> 
    <button type="submit" class="btn btn-primary">COOL BUTTON 
    </button> 
</form>

http://jsfiddle.net/ekaU2/

감사합니다!

당신은 그것에 대해 모든 이미지 또는 아이콘을 사용할 수 있지만 예를 들어 bootstrap icons를 사용하는 경우, 당신이 그런 식으로 그것을 할 수

출처

2014-05-11 Sahir

이 질문 오프 주제는 문제를 해결하기 위해 OP에서 최소한의 노력이 부족하고, "나를 위해 그것을"질문이기 때문에 것으로 나타납니다

여기 데모입니다. – easwee

<form> 
    <button type="submit" class="btn btn-primary"> 
     COOL BUTTON 
     <span class="glyphicon glyphicon-search"></span> 
    </button> 
</form>

Demo

출처

2014-05-11 08:01:07 cor

필자는 별도의 아이콘을 사용 하겠지만 아이디어는 얻는다. 그러나 내가 문제가되는 것은 아이콘의 배경과 폭을 설정하는 것입니다. http://jsfiddle.net/ekaU2/5/ – Sahir

버튼 태그에서 span 태그가 있습니다. 여기 고정 : http://jsfiddle.net/acor/5B66P/ – cor

아, 지금 이걸 이해하고 있다고 생각합니다. 나는 스팬을 내부에 넣으려고했지만 어떤 이유 때문에 패딩을 추가하고 버튼 내부의 상자처럼 보이게하기 위해 약간의 조정을한다고 생각하지 않았습니다. 당신의 도움을 주셔서 감사합니다! – Sahir

당신은 :after 의사 클래스를 사용할 수 있습니다 .

.btn:after { 
    content: " "; 
    display: block; 
    position: absolute; 
    top:0; 
    right: -60px; 
    width: 60px; 
    height: 60px; 
    background: #ddd url(path/to/img) no-repeat center center 
}

이 방법은 HTML을 변경하지 않아도됩니다. jsFiddle

출처

2014-05-11 08:03:48 Scott

CSS의 버튼 옆에 아이콘 추가하기

답변

관련 문제