ฉันสามารถเพิ่มสีให้กับไอคอน bootstrap โดยใช้ CSS ได้หรือไม่

159

บูตของ Twitter ใช้ไอคอนตาม Glyphicons available in dark gray and whiteโดยค่าเริ่มต้นคือ " ":

ภาพ 58.png

เป็นไปได้ไหมที่จะใช้ CSS trickery เพื่อเปลี่ยนสีของไอคอน? ฉันหวังว่าจะมีความสามารถ css3 อื่น ๆ ที่จะป้องกันไม่ให้มีชุดภาพไอคอนสำหรับแต่ละสี

ฉันรู้ว่าคุณสามารถเปลี่ยนสีพื้นหลังขององค์ประกอบล้อมรอบ ( ) แต่ฉันกำลังพูดถึงไอคอนสีพื้นหน้า ฉันเดาว่ามันจะเป็นไปได้ที่จะผกผันความโปร่งใสของภาพไอคอนแล้วตั้งค่าสีพื้นหลัง

ดังนั้นฉันสามารถเพิ่มสีให้กับไอคอน bootstrap โดยใช้ CSS ได้หรือไม่

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

ฉันไม่คิดอย่างนั้น ... แต่คุณอาจจะทำเช่นนั้นกับจาวาสคริปต์และองค์ประกอบผ้าใบ

— bfavaretto

@bfavaretto - คุณอธิบายได้ไหม? คุณหมายถึงการใช้โค้ด / พิกัดเพื่อวาดไอคอนแต่ละอันหรือใช้อิมเมจ png ที่มีอยู่อย่างใด?

— cwd

1

ขออภัยฉันไม่ได้มีประสบการณ์เพียงพอกับองค์ประกอบ Canvas ในการแนะนำรหัสคุณ แต่ฉันรู้ว่าคุณสามารถจัดการพิกเซลแบบแยกกันด้วย Canvas ได้

— bfavaretto

189

ใช่ถ้าคุณใช้Font Awesomeกับ Bootstrap! ไอคอนมีความแตกต่างกันเล็กน้อย แต่มีมากกว่านั้นพวกมันดูดีในทุกขนาดและคุณสามารถเปลี่ยนสีของมันได้

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

แก้ไข:ไอคอน Bootstrap 3.0.0 เป็นแบบอักษรแล้ว!

ในขณะที่คนอื่น ๆ พูดถึงการเปิดตัว Bootstrap 3.0.0 แล้วglyphs ไอคอนเริ่มต้นจะกลายเป็นฟอนต์เช่น Font Awesome และสีสามารถเปลี่ยนได้ง่ายๆโดยการเปลี่ยนcolorคุณสมบัติ CSS การเปลี่ยนขนาดสามารถทำได้ผ่านfont-sizeคุณสมบัติ

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

9

อ่าฉลาด! อย่าลืมตั้งค่าcursor: default;เพื่อให้ผู้ใช้ไม่เห็น I-Bar ตรวจสอบ FF Chartwell ซึ่งเป็นฟอนต์ที่ฉลาดมาก: tktype.com/chartwell.php

— ได

4

เมื่อคุณเลื่อนเมาส์ไปวางบนข้อความ (เช่นในโปรแกรมประมวลผลคำ) เคอร์เซอร์ของคุณดูเหมือนIตัวอักษรใหญ่ " " มันใช้สำหรับการเลือกข้อความ ใน CSS cursor: text;ก็เรียกว่า มันยังเป็นที่รู้จักในนาม "I-beam"

— ได

38

ด้วย Bootstrap RC 3 รีลีสล่าสุดการเปลี่ยนสีของไอคอนนั้นง่ายเหมือนการเพิ่มคลาสด้วยสีที่คุณต้องการและเพิ่มเข้าไปในช่วง

สีดำเริ่มต้น:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

จะกลายเป็น

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 รายการ Glyphicons

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

17

เนื่องจาก glyphicons เป็นฟอนต์จึงสามารถใช้คลาสบริบทเพื่อใช้สีที่เหมาะสมกับไอคอน

ตัวอย่างเช่น:  การเพิ่มtext-infoลงใน css จะทำให้ไอคอนเป็นข้อมูลสีน้ำเงิน

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

ขอบคุณกำลังมองหาวิธีที่จะใช้คลาสบริบท คลาสเรียนตามบริบทข้อความใด ๆ จะใช้ได้

— ดัสตินฮอดจ์ส

14

อีกวิธีที่เป็นไปได้ที่จะมีไอคอน bootstrap ในสีที่ต่างกันคือการสร้าง. png ใหม่ในสีที่ต้องการ (เช่น magenta) และบันทึกเป็น / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

ในตัวแปรของคุณไม่พบ

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

และเพิ่มบรรทัดนี้

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

ในของคุณsprites.lessเพิ่ม

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

และใช้มันเช่นนี้

<i class='icon-chevron-down icon-magenta'></i>

หวังว่าจะช่วยใครซักคน

— Sepp Ludger
แหล่งที่มา

5

แค่อยากจะย้ำI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

ไม่สามารถทำได้อย่างหมดจดผ่าน CSS ที่เข้ากันได้กับเบราว์เซอร์ข้ามเช่นกัน โดยปกติคนต้องการโทนสีที่มีไอคอนที่เกี่ยวข้องดังนั้นฉันจะบอกว่าชุดสีไม่เกิน 5 ชุดนั้นเป็นเรื่องที่ท้าทายมาก

— foxybagga

@seppludger คุณจะสร้างสไปรต์ฮาล์ฟลิ่งสีใหม่ได้อย่างไร คุณประสบความสำเร็จในการทำเช่นนี้? ฉันไม่สามารถเปลี่ยนสีได้หากฉันโหลดมันในโปรแกรมแก้ไขกราฟิกใด ๆ

— นอร์แมน

7

การทำงานที่รวดเร็วและสกปรกซึ่งทำเพื่อฉันไม่ใช่การระบายสีไอคอน แต่ให้ล้อมรอบด้วยป้ายกำกับหรือป้ายในสีที่คุณต้องการ

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

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

คำตอบของคุณมีประโยชน์ + 1. ฉันต้องการใช้ไอคอนแก้ไขและต้องการใส่สีเหลือง คุณช่วยบอกวิธีการทำเช่นนั้นได้ไหม

คุณก็สามารถเปลี่ยนไอคอนได้เป็นอย่างอื่น เช่น icon-white"> ตัวอย่างเช่น: มันจะดีกว่าที่จะไปสำหรับบูตใหม่ IMO ..

— frbl

6

Bootstrap Glyphicons เป็นแบบอักษร ซึ่งหมายความว่าสามารถเปลี่ยนแปลงได้เหมือนกับข้อความอื่น ๆ ผ่านการใส่สไตล์ CSS

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

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

ตัวอย่าง:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

ชมการเรียนการสอนและทำงานกับเงินทุน 3โดยเจนเครเมอหรือดูบทเรียนแต่ละเอาชนะ CSS หลักที่มีรูปแบบที่กำหนดเอง

— ยูจีน
แหล่งที่มา

4

ทั้งหมดนี้เป็นวงเวียนเล็กน้อย ..

ฉันใช้ร่ายมนตร์แบบนี้

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

และเพื่อส่งผลต่อสีผมรวม CSS ไว้ที่หัวแบบนี้

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila นิ้วหัวแม่มือสีเขียวและสีแดง

— Monsters X
แหล่งที่มา

4

ใช้งานได้กับแท็กสไตล์ด้วย:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

ป้อนคำอธิบายรูปภาพที่นี่

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

3

จริงๆแล้วมันง่ายมาก:

เพียงใช้:

.icon-name{
color: #0C0;}

ตัวอย่างเช่น:

.icon-compass{
color: #C30;}

แค่นั้นแหละ.

— Aniruddh Dixit
แหล่งที่มา

3

ใช้mask-imageคุณสมบัตินี้ แต่เป็นการแฮ็กบิต มันแสดงให้เห็นในบล็อก Safari ที่นี่ที่นี่

มันอธิบายยังเชิงลึกที่นี่ที่นี่

โดยทั่วไปคุณจะสร้างกล่อง CSS โดยมีคำพูด background-image: gradient(foo);แล้วนำมาส์กภาพมาใช้กับรูปภาพ PNG เหล่านั้น

มันจะช่วยให้คุณประหยัดเวลาในการสร้างภาพแต่ละภาพใน Photoshop แต่ฉันไม่คิดว่ามันจะประหยัดแบนด์วิดท์มากเว้นแต่คุณจะแสดงภาพด้วยสีที่หลากหลาย โดยส่วนตัวฉันจะไม่ใช้มันเพราะคุณจำเป็นต้องปรับมาร์กอัปของคุณให้ใช้เทคนิคได้อย่างมีประสิทธิภาพ แต่ฉันเป็นสมาชิกของ "ความบริสุทธิ์มีความจำเป็น" โรงเรียนแห่งความคิด

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

1

เก็บไว้ในใจการสนับสนุนสำหรับmask-imageสถานที่ให้บริการไม่ดีว่า

— Scott Bartell

1

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

เพิ่งแก้ไขเส้นทาง URL ในไฟล์ css เนื่องจากเป็นแบบสัมบูรณ์ (เริ่มต้นด้วย /) และฉันต้องการเป็นแบบสัมพัทธ์ แบบนี้:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

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

ในที่สุดสิ่งที่เข้ากันได้กับ Bootstrap

— Dmitry Ginzburg

1

คุณสามารถเปลี่ยนสีได้ทั่วโลกเช่นกัน

กล่าวคือ

 .glyphicon {
       color: #008cba; 
   }

— ผู้พัฒนา
แหล่งที่มา

1

เพียงใช้GLYPHICONSและคุณจะสามารถเปลี่ยนสีได้เพียงแค่ตั้งค่า CSS:

#myglyphcustom {
    color:#F00;
}

— Valter Lorran
แหล่งที่มา

0

ฉันคิดว่าฉันอาจเพิ่มตัวอย่างนี้ในโพสต์เก่านี้ นี่คือสิ่งที่ฉันเคยทำในอดีตก่อนที่ไอคอนจะเป็นแบบอักษร:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

นี่คล้ายกับคำตอบลับๆของ @frbl แต่ก็ไม่ได้ใช้รูปภาพอื่น แต่จะตั้งค่าสีพื้นหลังขององค์ประกอบเป็นwhiteและใช้คุณสมบัติ CSS แทนborder-radiusเพื่อทำให้องค์ประกอบทั้งหมด"ถูกปัดเศษ" หากคุณสังเกตเห็นว่าค่าของborder-radius(7.5px) เท่ากับครึ่งหนึ่งของคุณสมบัติwidthและheight(ทั้ง 15px ทำให้ไอคอนเป็นสี่เหลี่ยมจัตุรัส) ทำให้องค์ประกอบวงกลม

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