아이콘으로 부트 스트랩 3 버튼을 만드시겠습니까?

나는 부트 스트랩 3 버튼의이 종류를 만들어야합니다아이콘으로 부트 스트랩 3 버튼을 만드시겠습니까?

Button Preview

문제는 텍스트와 아이콘 사이의 라인 : 내가 많이 시도했지만 여전히 같은 모습 :(

을하지 않았다 여기

는 지금

CSS

.btn-default, .btn-default:active, .btn-default:focus{ 
    background-color:#fff; 
    background-color: rgba(255,255,255, 1.0); 
    -webkit-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0); 
    -moz-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0); 
    box-shadow:   0px 4px 0px 0px rgba(48, 174, 227, 1.0); 
    border-top:1px solid rgba(48, 174, 227, 1.0); 
    border-left:1px solid rgba(48, 174, 227, 1.0); 
    border-right:1px solid rgba(48, 174, 227, 1.0); 
}

을 위해 무엇을 가지고

HTML

<a href="#" class="btn btn-default"><i class="fa fa-lg fa-file-excel-o"></i>Export to excel</a>

아마 대답은 BTN 그룹에 있지만 그 아이콘이 클릭 할 :(

출처

2014-12-09 Miomir Dancevic

당신이와 범위를 추가하는 것을 시도했다 '테두리 왼쪽 : 단색 1px # YOURCOLOR' 아이콘과 텍스트 사이? 실수를하지 않으려는 경우 최소한 스팬 너비를 1 픽셀로 설정해야합니다. –

그 방법을 추가하는 것이 좋습니다,하지만 국경을 추가하려고하면, 무슨 일이 일어날까요, 나는 전체 높이 borde와 반으로 나누고 싶습니다 국경 문제는 내부에만 들어간다는 것입니다 –

좋아, 시도해 보자. sec –

데모 - http://www.bootply.com/vVPtGC3QEs

a.btn{ 
padding:4px 15px; 
} 

.fa-lg{ 
    border-right: 2px solid rgba(48, 174, 227, 1.0); 
    padding-right: 7px; 
    margin-right: 8px; 
    vertical-align: initial; 
    line-height:28px; 
}

출처

2014-12-09 07:35:29

좋아,하지만이 방법으로 많은 기본 부트 스트랩 클래스를 편집했습니다. –

@Gorostas 글쎄, 그냥 부트 스트랩 클래스를 그대로 유지하고, 자신의 클래스를 만들고 [this] (http : //www.bootply .com/cIcHk4ejdR) –

자신 만의 수업을 추가 할 수 있습니다 @Gorostas –

아이콘으로 부트 스트랩 3 버튼을 만드시겠습니까?

답변

관련 문제