부트스트랩 글꼴 아이콘을 사용하는 방법

Bootstrap에 대해 더 자세히 알고 싶다면 다음을 클릭하세요. Bootstrap tutorial#🎜 🎜 #

이 글에서는 글꼴 아이콘(Glyphicon)에 대해 설명하고 몇 가지 예를 통해 그 사용법을 이해할 것입니다. Bootstrap에는 200개 이상의 글꼴 형식의 글리프가 번들로 제공됩니다. 먼저 글꼴 아이콘이 무엇인지 먼저 이해하겠습니다.

글꼴 아이콘이란 무엇인가요? Glyphicons Halflings에는 상업용 라이센스가 필요하지만 프로젝트 기반 부트스트랩을 통해 이러한 아이콘을 무료로 사용할 수 있습니다. 아이콘 작성자에게 감사의 마음을 전하기 위해 이용 시 GLYPHICONS 홈페이지 링크를 꼭 포함해주시길 바랍니다.

글꼴 아이콘 가져오기

글꼴 아이콘은 다음 파일이 포함된 글꼴 폴더에서 찾을 수 있습니다. : ●glyphicons-halflings-regular.eot●glyphicons-halflings-regular.svg

●glyphicons-halflings-regular.ttf # 🎜🎜#

　●glyphicons-halflings-regular.woff

관련 CSS 규칙은 dist 폴더 상위의 css 폴더에 bootstrap.css 및 bootstrap-min.css 파일에 작성되어 있습니다. .

Usage

아이콘을 사용하려면 아래 코드를 사용하세요. 아이콘과 텍스트 사이에 적절한 간격을 두십시오.

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

다음 예에서는 글꼴 아이콘을 사용하는 방법을 보여줍니다.

<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button></p><button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User</button>

결과는 다음과 같습니다.

# 🎜🎜#글꼴 아이콘이 있는 탐색 모음

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home">Home</span></a>
                </li>
                <li>
                    <a href="#shop">
                        <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
                </li>
                <li>
                    <a href="#support">
                        <span class="glyphicon glyphicon-headphones">Support</span></a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container --></div><!-- jQuery (Bootstrap 插件需要引入) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包含了所有编译插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

사용자 정의 글꼴 아이콘

지금 글꼴 아이콘을 사용하는 방법을 살펴봤으니 글꼴 아이콘을 사용자 정의하는 방법을 살펴보겠습니다.

위의 예부터 시작하여 글꼴 크기, 색상을 변경하고 텍스트 그림자를 적용하여 아이콘을 사용자 정의하겠습니다. 다음은 시작 코드입니다:

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User</button>

효과는 다음과 같습니다:

#🎜 🎜#

글꼴 크기 사용자 정의

글꼴 크기를 늘리거나 줄여 아이콘을 더 크게 또는 더 작게 표시할 수 있습니다.

<button type="button" class="btn btn-primary btn-lg"   style="max-width:90%">
  <span class="glyphicon glyphicon-user"></span> User</button>

#🎜 🎜 ## ## ## ## ## ## ## #####사용자 정의 글꼴 색상#🎜🎜 ## ####

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User</button>

#### 🎜 🎜##

텍스트 그림자 적용

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User</button>

위 내용은 부트스트랩 글꼴 아이콘을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!