2016-05-06 21 views
6

Ich versuche Font Awesome zu verwenden, um mein Formular zu erstellen. Aber das FA-Symbol kommt bereits mit einer vollen Farbe. Wenn ich versuche, die Farbe hinzuzufügen, wird sie dem gesamten Symbol zugewiesen. Gibt es einen möglichen Weg, dies zu tun? Oder sollte ich irgendeinen anderen Unicode verwenden?Benutzerdefinierte Schriftart Awesome CSS

Hinweis: Ich muss dies nur durch CSS erreichen. Die übergeordnete Komponente sollte nicht konfiguriert werden. Daher muss ich nur eine CSS-Klasse übergeben, um dies zu erreichen. Bitte schlagen Sie mir vor, wenn es einen anderen Unicode gibt, den ich verwenden kann, da der, den ich benutze, nicht wirklich wie der im Styleguide aussieht

-Danke sehr!

Was ich habe: What I Have

What is supposed to be

Das erste Bild ist das, was ich habe. Das zweite Bild ist, wie ist es wie

sein soll mir

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

Bitte helfen. Danke

Antwort

4

Verwenden fa-Ausrufe statt stack und man kann es in einer runden Form Stil, dass Sie einen weißen Rand hinzufügen wird.

.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

+0

Vielen Dank! Ich schätze Ihre Hilfe. –

4

Nun, das FontAwesome-Symbol ist nicht genau das, was Sie wollen. Für den Anfang hat es keine Grenze, also, selbst wenn Sie die Hintergrundfarbe transparent bekommen, haben Sie nicht die weiße Grenze. Ich schlage vor, das 'Symbol' selbst zu erstellen. so etwas wie dieses versuchen:

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; 
} 

Sie mit der Schriftgröße, div Breite und Höhe (stellen Sie sicher, Breite = Höhe zu machen, spielen eine perfekter Kreis), und Randstärke, aber es sollte Ihre Bedürfnisse ziemlich decken.

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/k61gaf9z/

+0

Vielen Dank für Ihre Hilfe. Wie gesagt, ich durfte nur eine CSS-Klasse bestehen. –

4

ich darauf hindeutet, würde das Symbol Klasse fa-exclamation ändern. Alternativ können Sie den Unicode in ändern und einen weißen Rahmen mit Rahmenradius hinzufügen. Stellen Sie die Breite auf die Höhe des Symbols ein und zentrieren Sie das Symbol darin.

Etwas wie folgt aus:

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

Fühlen Sie sich frei mit den Werten herumzudaddeln um genau näher zu bekommen, was Sie suchen.

Auch wenn Sie nur CSS nicht begrenzt waren, konnte man die exclamation und circle-thin Symbole

+0

Ich bin nur auf CSS beschränkt. Dies scheint der Trick zu sein. Kannst du mich bitte korrigieren? https: // jsfiddle.net/vamshikrishna144/vqfbnns6/# & togetherjs = wEL5rUSwwD –

+0

Vielen Dank! @ –

Verwandte Themen