How to change the color of a Glyphicon?

Asked

Viewed 6,430 times

3

I’m using glyphicons, but I don’t know what the bootstrap does to add the color of it. It always comes with a "default color".

How is the mechanism to define the color of glyphicons and how can I change this "standard color"?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<i class="glyphicon glyphicon-edit""></i>

twitter-bootstrap bootstrap-glyphicons
  • 1

    You can change the color of the icons by adding a new class that is responsible for adding the new desired color. The same as in this question, only changes the Library.

3 answers

4


The bootstrap searches the color according to the already applied css on the page. For example, if you have an icon inside a link, and you have changed the color of the links in css, the icon will be the same color, example:

<!DOCTYPE html>
<html lang="pt">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Glyphicon Examples</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>    
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
  <p>Search icon on a button:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Search icon on a styled button:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>      
  <p>Print icon on a styled link button:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

Source: w3schools.

From the version 3.0 of bootstrap you can change the size of an icon just by changing the attribute color of the CSS. Example:

.pink{
  color: pink;
}
  <!DOCTYPE html>
    <html lang="pt">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Glyphicon Examplos</h2>
      <p>CSS Inline: <span class="glyphicon glyphicon-envelope" style="color:red;"></span></p>    
      <p>Adicionando classe:
        <a href="#"><span class="glyphicon glyphicon-envelope pink"></span></a>
      </p>

    </div>

    </body>
    </html>

Remembering that you can change the size of the icon with the attribute font-size, as in the example below:

.fonte-maior{
  font-size: 40px;
  }
 <!DOCTYPE html>
        <html lang="pt">
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        </head>
        <body>

        <div class="container">
          <h2>Glyphicon Examplos</h2>  
           <p>Sem fonte:
            <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
          </p>
          <p>Com fonte:
            <a href="#"><span class="glyphicon glyphicon-envelope fonte-maior"></span></a>
          </p>

        </div>

        </body>
        </html>

2

Just change the color of the pseudo-element :before, this will affect only the icon:

.glyphicon:before {
  color: red 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<a href='#'>
  <i class="glyphicon glyphicon-edit"></i> normal
</a>

<a style='color: orange'>
  <i class="glyphicon glyphicon-edit"></i> link com outra cor
</a>

-1

Or just put one:

..style="color:red;"

Or to pick the color by variable:

style="color:<?=$pegacor;?>;"

Then just put it on top of the $pegacor:

<?php $pegacor = função?>

So you can set the color using data from the database.

Browser other questions tagged twitter-bootstrap bootstrap-glyphicons

You are not signed in. Login or sign up in order to post.