트위터 부트스트랩 2에 제출 버튼에 아이콘 추가

StackOverflow https://stackoverflow.com/questions/9376192

문제

양식 입력 제출 버튼에 트위터 부트스트랩 아이콘을 사용하고 싶습니다.

에 대한 예 http://twitter.github.com/bootstrap/base-css.html#icons 주로 스타일이 지정된 하이퍼링크를 표시합니다.

내가 가장 가까운 것은 아이콘이 버튼 옆에 표시되지만 내부에는 표시되지 않는다는 것입니다.

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>
도움이 되었습니까?

해결책

입력 대신 버튼 태그를 사용할 수 있습니다. 라코 디스

다른 팁

이 목적으로 라벨 태그를 사용할 수 있다고 생각합니다.다음은 트위터 부트 스트랩 HTML navbar의 샘플입니다. 라코 디스

기본적으로 입력 (type= submit)에 대한 레이블 요소를 얻은 다음 실제 입력 제출을 숨 깁니다.사용자는 레이블 요소를 클릭하고 양식 제출을 계속할 수 있습니다.

Twitter Bootstrap과 함께 사용하도록 설계된 FontAwesome 을 사용해 보셔야 할 것 같습니다.

라코 디스

부트 스트랩 3으로이를 수행하는 새로운 방법이 있습니다. 라코 디스

"사용 방법"아래의 부트 스트랩 글 리피 콘 페이지에 있습니다.

저는 Twitter Bootstrap 아이콘을 기본 Rails 양식으로 만들고 싶었고이 게시물을 보았습니다.주위를 조금 뒤져 보니 쉽게 할 수있는 방법을 찾았습니다.Rails를 사용하고 있는지 확실하지 않지만 여기에 코드가 있습니다.핵심은 link_to view helper에 블록을 전달하는 것이 었습니다. 라코 디스

Rails를 사용하지 않는 경우 아이콘이있는 링크에 대한 출력 HTML이 있습니다 (편집, 삭제 및 새 제출 버튼 용) 라코 디스

다음은 완성 된 결과의 스크린 샷 링크입니다. http://grab.by/cVXm

(부트스트랩의) 글리피콘을 가져오는 방법이 하나 있습니다. input type="submit".CSS3 다중 배경을 사용합니다.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

그리고 CSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

여러 배경이 겹치는 경우 맨 위에 있는 배경이 첫 번째 배경이 됩니다. background: 표기법.따라서 맨 위에는 들여쓰기된 배경이 있습니다. 16px 왼쪽에서 (16px 단일 글리프콘의 너비입니다), 맨 아래 수준은 전체입니다. glyphicons-halflings.png 맨 아래 수준(전체 요소 포함)에는 최상위 수준과 동일한 배경 그라데이션이 있습니다.

-48px 0px 검색 아이콘의 컷입니다(icon-search) 그러나 다른 아이콘을 표시하는 것은 쉽습니다.

누군가가 필요하다면 :hover 효과, 배경 같은 형식으로 다시 입력해야 합니다.

이 문제를 해결했지만 아직 해결하지 못한 몇 가지주의 사항이 있습니다.

어쨌든 다음과 같이 완료됩니다.

평균 입력 버튼 가져 오기 : 라코 디스

글 리피 콘 스프라이트 파일에서 제출 버튼에 사용할 아이콘을 잘라 내고 14x14 픽셀 이미지인지 확인합니다.예, 이상적인 상황에서는 스프라이트를 재사용 할 수 있습니다. 누군가가이 사실을 알아 내면 어떻게되는지 듣고 싶습니다.:-)

그렇다면 다음과 같이 입력 버튼에 CSS를 작성할 수 있습니다. 라코 디스

Firefox 14, Chrome 21에서 작동

IE 9에서 작동하지 않음

tl; dr : 약간의 CSS로 제출 버튼에 아이콘을 자동으로 넣을 수 있지만 아이콘을 별도의 파일에 넣어야하며 Internet Explorer에서 작동하지 않습니다.

문제에 대한 해결책이라고 생각합니다 라코 디스

라코 디스

이게 더 나은 방법 인 것 같아요. 잘 작동합니다. 라코 디스

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top