Verander de kleur van glyphicons naar blauw in some- maar niet op alle plaatsen met behulp van Bootstrap 2

Ik gebruik de Bootstrap kader voor mijn UI. Ik wil de kleur van mijn glyphicons veranderen in blauw, maar niet in alle plaatsen. Op sommige plaatsen zou het de standaard kleur te gebruiken.

Ik heb verwezen naar deze twee schakels, maar ik ben niet iets nuttig te vinden.

. Let op: ik ben met behulp van Bootstrap 2.3.2


Antwoord 1, Autoriteit 100%

Het pictogram zal de kleur aannemen van de waarde van de colorCSS-eigenschap van het is ouder.

U kunt deze rechtstreeks toe te voegen aan de stijl:

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

Of u kunt het toevoegen als een klasse aan uw pictogram en vervolgens de tekstkleur om het in 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;
}

Deze viool heeft een voorbeeld.


Antwoord 2, Autoriteit 71%

Eenvoudig toe te passen Twitter Bootstrap
text-successklasse op Glyphicon:

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

Volledige lijst met beschikbare kleuren: Bootstrap-documentatie: Helper-klassen
(Blauw is ook aanwezig)


Antwoord 3, autoriteit 8%

Eindelijk vond ik zelf het antwoord. Om nieuwe iconen toe te voegen in 2.3.2 bootstrap moeten we Font Awsomecss toevoegen aan je bestand. Nadat we dit hebben gedaan, kunnen we de stijlen overschrijven met css om de kleur en grootte te wijzigen.

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

CSS

.brown{color:#9b846b}

Als we de kleur van het pictogram willen wijzigen, voegt u gewoon een bruine klasse toe en het pictogram wordt bruin. Het biedt ook pictogrammen van verschillende grootte.

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>

Antwoord 4, autoriteit 2%

U kunt dit ook doen, hopelijk helpt het

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

Antwoord 5, Autoriteit 2%

Voor Bootstrap 3.0 werkte dit voor mij:

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

Antwoord 6

Ja, u kunt de pictogrammen instellen op de witte kleur.
Hier is hoe het voor mij werkte.

Bootstrap <3

HTML

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

Hiermee wordt uw pictogram wit weergegeven.


Antwoord 7

Ik heb een alternatief gemaakt kleuren Bibliotheek voor bootstrap 2.3.2 Het is beschikbaar en eenvoudig te gebruiken voor iedereen die geïnteresseerd is in meer kleuren voor de oude glyphicons-bibliotheek.


Antwoord 8

Als het slechts een Bootstrap-pictogram is. Merk op dat pictogrammen onder tekst of vrij typografie staan. Voeg gewoon de tekstkleur klasse toe. B.g Tekst-primaire, tekstinformatie enzovoort enzovoort naar de klasse icon:

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

Antwoord 9

Bootstrap & GT; = V4.0 Gestopt glyphicon-ondersteuning

Verkeerde het lettertype Glyphicons. Als u pictogrammen nodig heeft, zijn sommige opties:

de upstream-versie van glyfhicons

octicons

Font Awesome

Bron: https://v4-alpha.getbootstrap.com/migration/#components

Als u Bootstrap >= v4.0 of nieuwer gebruikt, kunt u bestaande stijlklassen van bootstrap gebruiken, zoals text-success,text-warningenz.

Als je bijvoorbeeld fontawesome gebruikt:

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

Antwoord 10

CSS:

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

HTML

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

Glyphicons zijn verwijderd in 4.0, ik raad Font-awesome 4 of nieuwer aan 🙂


Antwoord 11

Alle eerdere antwoorden zijn correct, maar hier is een eenvoudige en snelle manier als u slechts één pictogram op één plaats nodig heeft om de kleur te wijzigen:

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


Antwoord 12

Kleur werkt niet, als u de png-afbeelding van het bootstrap-lettertype gebruikt, zoals ik.

[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 gebruikt css-filter om afbeelding in te kleuren, voorbeeld

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

Other episodes