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


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.