เปลี่ยนสีของ glyphicons เป็นสีน้ำเงินในบางแห่ง แต่ไม่ใช่ในทุกสถานที่โดยใช้ Bootstrap 2

ฉันใช้เฟรมเวิร์ก Bootstrap สำหรับ UI ของฉัน ฉันต้องการเปลี่ยนสีของ glyphicons เป็นสีน้ำเงิน แต่ไม่ใช่ในทุกสถานที่ ในบางสถานที่ควรใช้สีเริ่มต้น

ฉันอ้างถึงลิงก์ทั้งสองนี้แล้ว แต่ฉันไม่พบว่ามีประโยชน์อะไร

• ฉันสามารถเพิ่มสีให้กับไอคอน bootstrap โดยใช้ CSS ได้หรือไม่
• ฉันจะเปลี่ยน glyphicons ของ Bootstrap 3 เป็นสีขาวได้อย่างไร

โปรดทราบ: ผมใช้เงินทุน 2.3.2

ไอคอนจะนำสีจากค่าของcolorคุณสมบัติ css ของ parent

คุณสามารถเพิ่มสิ่งนี้ลงในสไตล์ได้โดยตรง:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

หรือคุณสามารถเพิ่มเป็นคลาสให้กับไอคอนของคุณจากนั้นตั้งค่าสีแบบอักษรใน CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

ซอนี้มีตัวอย่าง

เพียงใช้text-successคลาสBootstrap Twitter บน Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

รายการสีที่มีทั้งหมด: เอกสาร Bootstrap: คลาสตัวช่วย
(มีสีน้ำเงินด้วย)

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

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

หากเราต้องการเปลี่ยนสีของไอคอนให้เพิ่มคลาสสีน้ำตาลแล้วไอคอนจะเปลี่ยนเป็นสีน้ำตาล นอกจากนี้ยังมีไอคอนขนาดต่างๆ

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

คุณสามารถทำได้เช่นกันหวังว่าจะช่วยได้

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

สำหรับ bootstrap 3.0 สิ่งนี้ใช้ได้กับฉัน:

.myclass .glyphicon {color:blue !important;}

ใช่คุณสามารถตั้งค่าไอคอนเป็นสีขาว นี่คือวิธีการทำงานสำหรับฉัน

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

นี่จะทำให้ไอคอนของคุณเป็นสีขาว

ฉันสร้างไลบรารีสีสำรองสำหรับ bootstrap 2.3.2และพร้อมใช้งานง่ายสำหรับทุกคนที่สนใจสีเพิ่มเติมสำหรับไลบรารี glyphicons เก่า

หากเป็นเพียงไอคอนบูตสแตรป โปรดทราบว่าไอคอนอยู่ใต้ข้อความหรือใช้ตัวอักษรแทน เพียงเพิ่มคลาสสีข้อความเช่นนี้ เช่นข้อความหลัก, ข้อความข้อมูลและอื่น ๆ และอื่น ๆ ไปที่ระดับไอคอน:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

Bootstrap> = v4.0 ลดการสนับสนุน glyphicon

วางแบบอักษรไอคอน Glyphicons ลดลง หากคุณต้องการไอคอนตัวเลือกบางอย่างคือ:

Glyphiconsเวอร์ชันต้นน้ำ

Octicons

ตัวอักษรยอดเยี่ยม

ที่มา: https://v4-alpha.getbootstrap.com/migration/#components

หากคุณใช้ Bootstrap> = v4.0 หรือใหม่กว่าคุณสามารถใช้สไตล์คลาสที่มีอยู่ของ bootstrap เช่นtext-success,text-warningฯลฯ

ตัวอย่างเช่นหากคุณใช้ fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glyphicons ถูกลบใน 4.0 ฉันแนะนำ Font-awesome 4 หรือใหม่กว่า :)

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

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

สีใช้ไม่ได้หากคุณใช้สำหรับอิมเมจ bootstrap font png เช่น i

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5 ใช้ตัวกรอง css เพื่อปรับสีภาพตัวอย่าง

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);