Font personalizzato Stupendo CSS

Question

Sto cercando di usare Font Awesome per creare il mio modulo. Ma l'icona FA ha già un colore pieno. Quando provo ad aggiungere il colore, viene assegnato all'intera icona. C'è un modo possibile per fare questo? O dovrei usare qualsiasi altro unicode?

Nota: Devo farlo solo con i CSS. Il componente principale non dovrebbe essere configurato. Quindi devo passare solo una classe CSS per raggiungere questo obiettivo. Per favore suggeriscimi se esiste un altro unicode che posso usare dal momento che quello che uso non sembra proprio quello nella guida di stile

-Grazie mille !!

quello che ho:

La prima immagine è quello che ho. La seconda immagine è come si suppone che sia come

.exclamation-red .validation-tooltip-text:before { border: none; content: "\f06a"; font-family: fontAwesome; left: 10px; position: absolute; font-size: 20px; top: 12px; color: white; }

Si prega di aiutarmi. Grazie

Answer 1

Usa fa-esclamativo al posto ed è possibile lo stile che all'interno di una forma rotonda che si aggiungerà un bordo bianco a.

.validation-tooltip-text:before { 
    content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/ 
    font-family: fontAwesome; 
    left: 10px; 
    position: absolute; 
    font-size: 20px; 
    line-height:22px; 
    height: 22px; 
    width: 22px; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    text-align: center; 
    vertical-align:middle; 
    top: 12px; 
    color: white; 
} 

http://codepen.io/partypete25/pen/dMwwvz?editors=1100

Answer 2

Bene, l'icona FontAwesome non è esattamente ciò che desideri. Per i principianti, non ha un bordo, quindi anche se si ottiene il colore di sfondo trasparente, non si avrà il bordo bianco. Ti suggerisco di creare l''icona' tu stesso. Provare qualcosa di simile:

HTML:

<div class="exclamation-circle"> 
    &#x21; 
</div> 

CSS:

.exclamation-circle { 
    color: white; 
    width: 30px; 
    height: 30px; 
    font-size: 1em; 
    font-weight: bold; 
    background-color: transparent; 
    border: 2px solid white; 
    border-radius: 50%; 
    text-align: center; 
} 

si può giocare con la font-size, larghezza div e l'altezza (assicurarsi width = altezza per renderlo un cerchio perfetto) e lo spessore del bordo, ma dovrebbe quasi coprire le vostre esigenze.

Ecco un esempio di lavoro: https://jsfiddle.net/k61gaf9z/

Answer 3

vorrei suggerire cambiare la classe icona per fa-exclamation. In alternativa è possibile modificare l'unicode in "\f12a" e aggiungere un bordo bianco con raggio di bordo. Imposta la larghezza uguale all'altezza dell'icona e centra l'icona all'interno.

Qualcosa di simile a questo:

.exclamation-red { 
    border: 2px solid #FFFFFF; 
    border-radius: 50%; 
    width: /* set this to the same as the icon height */ 
    text-align: center; 
} 

.exclamation-red:before { 
    content: "\f12a"; 
    color: #FFFFFF; 
} 

Sentitevi liberi di smanettare con i valori al fine di avvicinarsi a esattamente quello che stai cercando.

anche se non erano limitati a solo CSS, si potrebbe stack i exclamation e circle-thin icone