发表新帖
发表新帖

Can I add color to bootstrap icons only using CSS?

后端 未结
关注
14 1387
说谎
说谎 2020-11-28 02:58

Twitter\'s bootstrap uses Icons by Glyphicons. They are \"available in dark gray and white\" by default:

相关标签:
14条回答
  • [愿得一人]
    2020-11-28 03:32

    The Bootstrap Glyphicons are fonts. This means it can be changed like any other text through CSS styling.

    CSS:

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

    HTML:

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

    Example:

    <!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>


    Watch the course Up and Running with Bootstrap 3 by Jen Kramer, or watch the individual lesson on Overriding core CSS with custom styles.

    0 讨论(0)
  • 情歌与酒
    2020-11-28 03:35

    Yes, if you use Font Awesome with Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them.

    Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are at the bottom of the page in the provided link.

    Edit: Bootstrap 3.0.0 icons are now fonts!

    As some other people have also mentioned with the release of Bootstrap 3.0.0, the default icon glyphs are now fonts like Font Awesome, and the color can be changed simply by changing the color CSS property. Changing the size can be done via font-size property.

    0 讨论(0)
  • 遇见更好的自我
    2020-11-28 03:35

    Also works with the style tag:

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

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

    enter image description here

    0 讨论(0)
  • 我寻月下人不归
    2020-11-28 03:35

    Use the mask-image property, but it's a bit of a hack. It's demonstrated in the Safari blog here.

    It's also described in-depth here.

    Basically you'd create a CSS box, with say a background-image: gradient(foo); and then apply an image mask to it based on those PNG images.

    It would save you development time making individual images in Photoshop, but I don't think it would save much bandwidth unless you'll be displaying the images in a wide variety of colours. Personally I wouldn't use it because you need to adjust your markup to use the technique effectively, but I'm a member of the "purity is imperitive" school-of-thought.

    0 讨论(0)
  • 慢半拍i
    2020-11-28 03:35

    The accepted answer (using font awesome) is the right one. But since I just wanted the red variant to show on validation errors, I ended using an addon package, kindly offered on this site.

    Just edited the url paths in css files since they are absolute (start with /) and I prefer to be relative. Like this:

    .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;}
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-28 03:42

    This is all a bit roundabout..

    I've used the glyphs like this

      </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>

    and to affect the color, i included a bit of css at the head like this

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

    Voila, green and red thumbs.

    0 讨论(0)
 看不清?
提交回复
热议问题