더 큰 글 리피 콘

212

트위터 부트 스트랩 3.0 (2.3.x 아님)에서 더 큰 Glyphicon을 어떻게 만드나요?

이 코드는 내 글리프 콘을 크게 만듭니다.

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

span 만 사용하는 동안 btn-lg 클래스를 사용 하지 않고이 크기 를 얻으려면 어떻게 해야합니까?

이것은 작은 글리프 콘을 제공합니다.

<span class="glyphicon glyphicon-link"></span>

— 기 오미에
소스

372

glyphicon에 원하는 글꼴 크기를 지정할 수 있습니다.

span.glyphicon-link {
    font-size: 1.2em;
}

큰! 필자의 경우 버튼이있는 입력 그룹 -btn이 있었고이 버튼은 조금 컸습니다. 그래서 나는 글리프 콘에 "font-size : 95 %"를 주었고 해결되었습니다.

— victorf

41

내가하는 방법은 다음과 같습니다.

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

이를 통해 즉시 크기를 변경할 수 있습니다. CSS를 변경하고 모두에게 적용하는 대신 크기를 변경하는 임시 요구 사항에 가장 적합합니다.

— 랜디 그린 콘
소스

2

일반적으로 인라인 스타일은 좋은 접근 방식이 아닙니다. 일부 구성 요소에 대한 특정 스타일이 필요하면 그냥의 부모 클래스를 통해 새 글꼴 크기를 적용

— 칼로 얀 Stamatov

때때로 그것은 하나의 오프이고 당신은 귀찮게 할 수 없습니다

— Matthew Lock

29

이 .btn-lg클래스는 부트 스트랩 3 ( link ) 에 다음 CSS를 가지고 있습니다 .

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

동일 font-size하고 line-height범위에 적용하면 (하나 이상의 인스턴스에서이 효과를 사용하려는 경우 .glyphicon-link또는 새로 만든 .glyphicons-lg) 큰 버튼과 동일한 크기의 글 리피 콘을 얻게됩니다.

— 안젤리크
소스

4

btn-lg클래스를 추가하는 것이 훨씬 쉬운 옵션입니다. 좋은 대답입니다!

— Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

스 니펫 확장

— 바리 수크
소스

2

내 경우, 나는 한 input-group-btnA의를 button하고,이 button컨테이너보다 조금 더 크다. 그래서 방금 font-size:95%글리프 콘을 주었고 해결되었습니다.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

— 승자
소스

2

당신 의 <h1>또는 쓰기 <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— 조용한
소스

0

부트 스트랩 3을 사용하는 경우 다음과 같이 태그를 사용하십시오. 부트 스트랩 3에 완벽하게 작동
합니다. 여러 태그를 사용하여 크기를 더 작게 설정할 수도 있습니다 .
암호:


— 발린 크
소스

이것은 질문의 정반대입니다. 스타일을 재정의하지 않으면 작게 만듭니다. 다른 날 그 태그를 정확한 목적으로 사용했습니다.

— 리차드 바커