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

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

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



답변

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

.glyphicon {
    font-size: 50px;
}

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

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


답변

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

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

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

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

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


답변

부트 스트랩을 사용하고 글꼴이 훌륭하다면 쉽고 간단합니다. 한 줄의 새로운 코드를 작성할 필요가 없습니다. 원하는대로 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>


답변

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

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


답변

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

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


답변

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

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 부트 스트랩


답변

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

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