Wie ändert man die innere Farbe von Glyphicons in Bootstrap?

Ich habe eine leere-Sterne-Taste wie diese,Wie ändert man die innere Farbe von Glyphicons in Bootstrap?

<button type="button" class="btn btn-default btn-lg" id="refresh"> 
     <span class="glyphicon glyphicon-star-empty"></span> 
</button>

Wenn ich es klicken, möchte ich die innere Farbe gelb wie hier gezeigt ändern - http://s21.postimg.org/3qwgsnrcj/star.png

Wie wir dies mit Bootstrap erreichen können, und Javascript?

Hier ist ein Link zu dem, was ich bisher bekommen habe - http://jsbin.com/refatelefi/edit?html,output

Quelle

2016-04-02 Kemat Rochi

@Paulie_D Es ist möglich, aber es ist ein bisschen böse. Was OP zu tun hat: Fügen Sie einen weiteren Stern (mit JS) hinzu, wenn Sie auf die Schaltfläche klicken. Siehe https://jsfiddle.net/066bkv87/ – Roy

Ich meinte mit CSS ... alles ist möglich mit JS –

@Paulie_D Check. Glücklicherweise kann OP JS verwenden. – Roy

A glyphicon wie ein Charakter ist. Sie können die Farbe ändern, indem Sie die Farbeigenschaft des Span-Stils ändern.

<button type="button" class="btn btn-default btn-lg" id="refresh"> 
    <span class="glyphicon glyphicon-star-empty"></span> 
</button> 

.glyphicon-star-empty { 
    color: yellow; 
}

jedoch das Symbol gepflückt Sie ist nicht voll, so dass Sie nicht das Innere ändern, wie Sie gefragt. Ich würde stattdessen den "glyphicon glyphicon-star" empfehlen.

Quelle

2016-04-02 19:50:12 Finickyflame

Sie können ein vollständiges Symbol und eine Farbe verwenden und dann die Außenseite über Textschatten mit Schwarz oder einer anderen Farbe neu zeichnen.

.glyphicon-star { 
 
    color: yellow; 
 
    text-shadow:0 0 black,0 0 black,0 0 black,0 0 black,0 0 black; 
 
} 
 
.bis.glyphicon-star { 
 
    text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black ; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button type="button" class="btn btn-default btn-lg" id="refresh"> 
 
    <span class="glyphicon glyphicon-star"></span> 
 
</button> 
 
<button type="button" class="btn btn-default btn-lg" id="refresh"> 
 
    <span class="glyphicon glyphicon-star bis"></span> 
 
</button>

Quelle

2016-04-02 19:57:23

Funktioniert gut mit weniger Code. Vielen Dank :) –

Warum wiederholst du die gleiche Text-Schatten-Regel mehrmals? – dandavis

@dandavis, um den Schlag nachzuahmen, der nur mit SVG verfügbar ist. Text-Schatten produziert nur Unschärfen, wenn Sie sie stapeln, ist es mehr wie ein Schürhaken dann :), benutzen Sie einfach stattdessen einen und sehen Sie Unterschied. Sie können so viele hinzufügen wie Sie möchten oder brauchen (Größe, Orientierungsfarben, ..) –

Ich bin nicht sicher über das Erhalten es genau ähnlich wie Ihre star.png, während können Sie Javascript verwenden CSS Farbe Eigenschaft auf die Schaltfläche festlegen oder Sie können Hintergrundfarbe verwenden möchten Eigentum. Hier ist eine einfache Demo http://jsbin.com/netufaruxa/1/edit?html,js,output

HTML:

<body> 
<button id="myBtn" type="button" class="btn btn-default btn-lg" id="refresh"> 
     <span class="glyphicon glyphicon-star-empty"></span> 
</button> 
</body>

JS:

function colorChange(){ 
    if(document.getElementById("myBtn").style.color==""){ 
    document.getElementById("myBtn").style.color="yellow"; 
    }else{ 
    document.getElementById("myBtn").style.color=""; 
    } 
} 
(function() { 
document.getElementById("myBtn").addEventListener("click", colorChange); 
})();

Quelle

2016-04-02 20:07:32 utkarshmail2052

Wie ändert man die innere Farbe von Glyphicons in Bootstrap?

Antwort

Verwandte Themen