Glyphicons ที่ใหญ่กว่า

ฉันจะสร้าง Glyphicons ที่ใหญ่กว่าใน twitter bootstrap 3.0 ได้อย่างไร (ไม่ใช่ 2.3.x)

รหัสนี้จะทำให้ glyphicons ของฉันใหญ่:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

ฉันจะได้ขนาดนี้โดยไม่ใช้คลาส btn-lg ในขณะที่ใช้เพียงช่วงเดียวได้อย่างไร

สิ่งนี้จะให้ glyphicon ขนาดเล็ก:

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

คุณสามารถกำหนดขนาดตัวอักษรตามรูปแบบตามที่คุณต้องการ:

span.glyphicon-link {
    font-size: 1.2em;
}

นี่คือวิธีที่ฉันทำ:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

สิ่งนี้ทำให้คุณสามารถเปลี่ยนขนาดได้ทันที ทำงานได้ดีที่สุดสำหรับข้อกำหนดเฉพาะกิจเพื่อเปลี่ยนขนาดแทนที่จะเปลี่ยน css และปรับใช้กับทุกคน

.btn-lgชั้นมี CSS ต่อไปนี้ใน Bootstrap 3 ( ลิงค์ ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

หากคุณใช้ตัวเดียวกันfont-sizeและline-heightกับสแปน (อย่างใดอย่างหนึ่ง.glyphicon-linkหรือที่สร้างขึ้นใหม่.glyphicons-lgหากคุณจะใช้เอฟเฟกต์นี้ในมากกว่าหนึ่งตัวอย่าง) คุณจะได้รับรูปแบบไกลโคเจนขนาดเดียวกับปุ่มขนาดใหญ่

ในกรณีของฉันฉันมีinput-group-btna buttonและนี่buttonมันใหญ่กว่าตู้คอนเทนเนอร์เล็กน้อย ดังนั้นฉันจึงให้font-size:95%glyphicon ของฉันและแก้ไขได้

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

เขียนของคุณ<span>ใน<h1>หรือ<h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

หากคุณใช้ bootstrap 3 ให้ใช้แท็กเช่นนี้<small><span class="glyphicon glyphicon-send"></span></small>ทำงานได้อย่างสมบูรณ์แบบสำหรับ Bootstrap 3
คุณสามารถใช้หลาย<small>แท็กเพื่อกำหนดขนาดให้เล็กลง
รหัส:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>