web-dev-qa-db-ja.com

フォントの素晴らしい四角い代わりにアイコンを表示

Font-familyをいくつかのDropDownListに変更する必要があります。font-familyを変更するまでアイコンは表示されます。選択したすべてのフォントファミリがアイコンに対して機能しないため、代わりに常に正方形が表示されます。どうすれば修正できますか？

ありがとう

htmlcssfont-awesomebootstrap-4
7
aingeal_brea

ために <i>タグ、FontAwesomeを優先的に使用font-family

body * {
font-family:'tahoma'!important;
}

body i {
font-family:'FontAwesome'!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-male"></span> <span>Male</span> 
<br>
<span class="fa fa-female"></span> <span>Female</span>
<hr>
<i class="fa fa-male"></i> <span>Male</span> 
<br>
<i class="fa fa-female"></i> <span>Female</span>
4
Farhad Bagherlo
  1. 素晴らしいフォントを<head>タグ、このような<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
  2. 次のようにアイコンを使用します：<i class="fa fa-address-book" aria-hidden="true"></i>、これ以上、それ以下、その間に何もない、変更しない<i>から<span>または変更してくださいfont-family。色やスタイルを更新したい場合は、新しいクラスを追加してこの方法で更新することをお勧めします。
4
Melcma

それはあなたが使用しているリンクかもしれません。一部のアイコンは新しいリリースのものであり、リポジトリの古いリンクでは機能しません。

使用しているCDNが最新であることを確認してください。

1
EAzevedo

私はこの問題に遭遇し、その原因をいくつかのアイコンが "brand icons" として分類されるまで追跡しました。

私の場合、font awesomeの「ソリッドアイコン」は完全に機能しましたが、私が使用した「ブランドアイコン」はすべて長方形としてレンダリングされました。 「all」フォントの素晴らしいCSSファイルを使用して問題を解決しました：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

クラスfaをfabに置き換えるだけでなく、ブランドアイコンが使用されていた場合：

<i class="fab fa-youtube"></i>

これが誰かを助けることを願っています！

1
Dacre Denny