カスタムフォント驚くばかりのCSS

Question

私は自分のフォームを作成するためにフォントAwesomeを使用しようとしています。しかし、FAアイコンにはすでに色が塗りつぶされています。色を追加しようとすると、アイコン全体に表示されます。これを行う方法がありますか？それとも他のユニコードを使うべきですか？

注：これはCSSでのみ達成する必要があります。親コンポーネントは構成されていません。だから私はこれを達成するためにCSSクラスだけを渡す必要があります。使用しているImが実際にスタイルガイドのように見えないので、私が使用できる他のユニコードがあれば教えてください

- 本当にありがとうございます！私が持っているもの

：

最初の画像は、私が持っているものです。第2の画像が、それは私を助けてください

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

ようなことになっている方法です。ありがとうございます

Answer 1

利用FA-感嘆符をstackことができ、あなたは、あなたがする白い境界線を追加します丸い形の中でそれをスタイルすることができます。

.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

まあ、FontAwesomeのアイコンは、あなたが欲しいものではありません。まず、ボーダーはありません。そのため、背景色を透明にしても、白いボーダーはありません。 自分で「アイコン」を作成することをおすすめします。このような何かを試してみてください：

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

フォントサイズで再生することができ、divの幅と高さは（それ作るために必ず幅=高さを作ります完璧な円）、および境界線の太さがありますが、それはあなたのニーズをかなりカバーするはずです。私はfa-exclamationにアイコンクラスを変更することを示唆しているでしょうhttps://jsfiddle.net/k61gaf9z/

Answer 3

：

はここで働い例です。または、ユニコードを"\f12a"に変更し、border-radiusの白い枠線を追加することもできます。幅をアイコンの高さと同じにして、アイコンを中央に配置します。このような

何か：

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

は正確にあなたが探しているものに近い取得するために、値の周りいじること自由に感じています。あなただけCSSに限られていなかった場合

また、あなたの代わりにexclamationとcircle-thinアイコン