글 리포 콘을 더 크게 만드는 방법은 무엇입니까? (크기 변경?)


239

지구 글리프 아이콘을 더 크게 만들어서 페이지의 많은 부분을 덮고 싶습니다 (벡터 이미지). 버튼이나 다른 것이 아닙니다. 그냥 혼자 야 이 방법이 있습니까?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

답변:


367

glyphicon모든 아이콘 크기를 늘리려면 글꼴 크기를 늘리십시오 .

.glyphicon {
    font-size: 50px;
}

하나의 아이콘 만 타겟팅하려면

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

2
작동했습니다! (5 분 후에 받아들입니다. 남은 시간입니다) 중앙에 배치 할 방법이 있습니까? @VenomVendor
CoderBryan

2
text-center사업부.
Aibrean

7
글리프 콘을 더 큰 "주문형"으로 만들려면 .glyphicon.larger를 사용하십시오. {font-size : 150 %; }
user216661 2016

더 얇게 만드는 것은 어떻습니까?
Nofel

!important;boostrap CSS를 재정의하려면 글꼴 크기 를 추가 해야했습니다.
MeanwhileInHell

143

Fontawesome은 이에 대한 완벽한 솔루션을 제공합니다.

나는 같은 것을 구현했다. 기본 .css 파일에 이것을 추가하십시오.

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

귀하의 예에서 당신은 이것을해야합니다.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

좋은! 1.5em과 같은 분수를 사용할 수도 있습니다.
Mike Taverne

허용 된 답변보다 훨씬 낫고 반복되는 문제에 대한 일반적인 해결책을 보여줍니다.
Adam

71

부트 스트랩을 사용하고 글꼴이 훌륭하다면 쉽고 간단합니다. 한 줄의 새로운 코드를 작성할 필요가 없습니다. 원하는대로 fa-Nx를 추가 하십시오. 데모를 참조하십시오

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

Glyphicon과 Font-Awesome이 힘을 합치십시오!
Timo

나는 FA와 Glyphicon을 결합하는 것을 좋아하지 않습니다. 인라인 스타일을 사용하거나 위의 CSS 클래스를 통해 글리프 아이콘 크기를 조정하는 방법은 아래 답변을 참조하십시오. 또는 순수한 FA 솔루션을 사용하려면-> fa fa-globe fa-2x (v4.x)
MarcoZen

MarcoZen : 어쨌든 다음 버전의 부트 스트랩 4 Glyphicon이 제거 될 것입니다. 우리 중 많은 사람들이 이전에 함께 사용했습니다.
Ali Adravi

17

예, 기본적으로 인라인 스타일을 사용할 수도 있습니다.

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

11

추가 CSS가 필요없는 제목을 사용하십시오.

<h1 class="glyphicon glyphicon-plus"></h1>

2
이 작업을 수행 할 수는 있지만 CSS가 약간 작동하는 방식으로 세부적인 제어 수준을 제공하지는 않습니다.
MattD

6
글꼴 크기에 미치는 영향으로 인해 헤더를 사용하는 것은 안티 패턴입니다. 스크린 리더가 페이지에서 가장 중요한 콘텐츠의 제목 / 제목을 의미한다고 가정하면 키보드로 사이트를 탐색하는 사용자가 아이콘으로 바로 전송됩니다.
Roy

9

예를 들어 .. 클래스 추가 :

btn-lg-LARGE

btn-sm-작은

btn-xs-매우 작음

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

참조 링크 부트 스트랩 : Glyphicons 부트 스트랩


7
질문은 이미지가 아닌 이미지를 버튼으로 간주했습니다.
user216661

0

부트 스트랩 헤더 클래스 ( "h1", "h2"등)를 사용했습니다. 이렇게하면 실제 태그를 사용하지 않고도 모든 스타일의 이점을 얻을 수 있습니다. 예를 들면 다음과 같습니다.

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.