3

Estou utilizando glyphicons, porém não sei como é a forma que o bootstrap faz para adicionar a cor do mesmo. Sempre vem com uma cor "padrão".

Como é o mecanismo para definir a cor dos glyphicons e como posso alterar essa "cor padrão"?

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

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

1
  • 1
    Você pode alterar a cor dos ícones adicionando uma nova classe que se responsabiliza por adicionar a nova cor desejada. O mesmo que nesta pergunta, só muda a Biblioteca.
    – Chun
    23/02/2016 às 14:24

3 Respostas 3

4

O bootstrap busca a cor de acordo com o css já aplicado na página. Por exemplo, se você possuir um ícone dentro de um link, e tiver alterado a cor dos links no css, o ícone ficará da mesma cor, exemplo:

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

Fonte: w3schools.

A partir da versão 3.0 do bootstrap você pode alterar a for de um ícone apenas alterando o atributo color do CSS. Exemplo:

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

Lembrando que você pode alterar o tamanho do ícone com o atributo font-size, como no exemplo abaixo:

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

1
2

Basta alterar a cor do pseudo-elemento :before, isto irá afetar somente o ícone:

.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

Ou só colocar um:

..style="color:red;"

Ou para pegar a cor por variável:

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

Dai é só colocar em cima do $pegacor:

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

Assim dá para definir a cor usando dados vindos do banco.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .