• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material Design Icons (글리피콘/폰트오썸/구글아이콘)

BS3 : Glyphicon 지원 O

BS4 : Glyphicon 지원 X

 

Glyphicon

 

glyphicon 소개

 

BS에 포함된 각종 서식에 사용 가능한 아이콘. (260개 제공)

 

 

Glyphicon 구문


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

 

※ 핑크색 부분에 넣고자 하는 글리피콘 이름 넣음.

Glyphicon 코드확인

 

http://glyphicons.com/

http://bootstrapk.com/components/#glyphicons

https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

 

 

Glyphicon 예제

 

봉투아이콘 : <span class="glyphicon glyphicon-envelope"></span>

검색아이콘 : <span class="glyphicon glyphicon-search"></span>

인쇄아이콘 : <span class="glyphicon glyphicon-print"></span>

다운아이콘 : <span class="glyphicon glyphicon-download"></span>

 

결과보기


Glyphicon CSS

 

.glyphicon {

    position: relative;

    top: 1px;

    display: inline-block;

    font-family: "Glyphicons Halflings";

    font-style: normal;

    font-weight: 400;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

 

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012