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.
- kan ik toevoegen kleur aan bootstrap pictogrammen alleen met behulp van CSS?
- Hoe kan ik Bootstrap 3’s glyphicons naar wit veranderen?
. 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 color
CSS-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-success
klasse 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
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-warning
enz.
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);