ฉันจะทำให้ไกลโคเจนใหญ่ขึ้นได้อย่างไร (เปลี่ยนขนาดหรือไม่)

239

ฉันต้องการทำให้ glyphicon โลกใหญ่ขึ้นเพื่อให้ครอบคลุมส่วนใหญ่ของหน้า (เป็นภาพเวกเตอร์) มันไม่ได้อยู่ในปุ่มหรืออะไรเลย มันเป็นเพียงอย่างเดียว มีวิธีทำเช่นนี้หรือไม่?

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

— CoderBryan
แหล่งที่มา

สำเนาซ้ำที่เป็นไปได้ของBigger Glyphicons

— Kevin Workman

367

เพิ่มขนาดตัวอักษรของglyphiconเพื่อเพิ่มขนาดไอคอนทั้งหมด

.glyphicon {
    font-size: 50px;
}

หากต้องการกำหนดเป้าหมายไอคอนเดียวเท่านั้น

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

— VenomVendor
แหล่งที่มา

2

นั่นได้ผล! (ฉันจะยอมรับมันใน 5 นาที (นั่นเป็นเวลาที่เหลือ)) มีวิธีการจัดกึ่งกลางมันหรือไม่? @VenomVendor

— CoderBryan

2

text-centerบน div

— Aibrean

7

เพื่อทำให้ glyphicon ใหญ่ขึ้น "ตามต้องการ" ใช้. glyphicon.larger {font-size: 150%; }

— user216661

แล้วมันจะบางลงไหม?

— Nofel

ฉันต้องเพิ่ม!important;ขนาดตัวอักษรเพื่อลบล้าง CSS boostrap

— ในขณะที่ภายใน

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

ดีกว่าคำตอบที่ยอมรับและแสดงวิธีแก้ไขปัญหาทั่วไปที่เกิดขึ้นซ้ำ ๆ

— อดัม

71

หากคุณใช้ bootstrap และ font-awesome มันเป็นเรื่องง่ายไม่จำเป็นต้องเขียนโค้ดใหม่บรรทัดเดียวเพียงเพิ่ม 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>

— Ali Adravi
แหล่งที่มา

Glyphicons และ Font-Awesome เข้าร่วมกองกำลัง!

— Timo

ฉันไม่ชอบการรวม FA และ Glyphicons ดูคำตอบด้านล่างเกี่ยวกับวิธีการเพิ่มขนาดของ glyphicon โดยใช้สไตล์อินไลน์หรือผ่านคลาส css ด้านบน หรือสำหรับการใช้โซลูชัน FA อย่างแท้จริง -> fa fa-globe fa-2x (v4.x)

— MarcoZen

MarcoZen: อย่างไรก็ตามโดย bootstrap 4 Glyphicons รุ่นถัดไปกำลังจะถูกลบออกไปพวกเราหลายคนก่อนหน้านี้ใช้ร่วมกัน

— Ali Adravi

17

ใช่และโดยทั่วไปคุณสามารถใช้สไตล์อินไลน์ได้:

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

— Terje Solem
แหล่งที่มา

11

ลองใช้หัวเรื่องไม่จำเป็นต้องเพิ่ม CSS

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

— Bagus Cahyono
แหล่งที่มา

2

คุณสามารถทำสิ่งนี้ได้ แต่มันไม่ได้ช่วยให้คุณสามารถควบคุมระดับที่ CSS จะทำได้เพียงเล็กน้อย

— MattD

6

การใช้ส่วนหัวเนื่องจากเอฟเฟกต์ที่มีต่อขนาดแบบอักษรเป็นรูปแบบการต่อต้าน ผู้ใช้ที่สำรวจไซต์ของคุณด้วยแป้นพิมพ์จะถูกส่งตรงไปยังไอคอนของคุณเนื่องจากโปรแกรมอ่านหน้าจอถือว่าผู้ใช้ระบุว่าเป็นหัวเรื่อง / หัวเรื่องของเนื้อหาที่สำคัญที่สุดในหน้านั้น

— Roy

9

ตัวอย่างเช่น .. เพิ่มคลาส:

btn-lg - ขนาดใหญ่

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>

Ref link Bootstrap: Glyphicons Bootstrap

— OpenWebWar
แหล่งที่มา

7

คำถามถือเป็นรูปภาพไม่ใช่ภาพเป็นปุ่ม

— user216661

0

ฉันใช้คลาสส่วนหัว bootstrap ("h1", "h2" ฯลฯ ) สำหรับสิ่งนี้ วิธีนี้คุณจะได้รับประโยชน์จากสไตล์ทั้งหมดโดยไม่ต้องใช้แท็กจริง นี่คือตัวอย่าง:

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

— Alex Kozlov
แหล่งที่มา