web-dev-qa-db-ja.com

Font Awesome 5、なぜCSSコンテンツが表示されないのですか？

CSSのコンテンツでFontAwesomeを使用しようとしています。

アイコンの代わりにアイコンのコードと共に表示されます。オンラインヘルプに従いましたが、まだ機能していません

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
cssfont-awesomepseudo-elementfont-awesome-5
7
happycoding

JS + SVGバージョンを使用している場合はこれをお読みください： JS + SVGバージョンを使用している場合、Font Awesome 5は空の四角を表示します

まず、次のいずれかを使用して、headタグにFont Awesome 5のCSSファイルを含めるだけです。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

または、CSSファイル内で：

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css")

次に、font-familyとcontentを修正する必要があります：

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
<i class="fp-prev"></i>

サイドノートとして：Font Awesome 5はアイコンの各パックに3つの異なるfont-familyを提供します：

Font Awesome 5 Freeは無料のアイコンです。

Font Awesome 5 Brands Facebook、Twitterなどのブランドアイコン用.

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: "\f099"; 
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
<i class="fp-prev"></i>

Font Awesome ProのFont Awesome 5 Pro

場合によっては、次のようにfont-weightの値を調整する必要があります： 疑似要素のFont Awesome 5はアイコンではなく正方形を表示します

19
Temani Afif

font-weight: 900;。会いたい

2
Musfiq Shanta

これは私にも起こりました。私はこのアイコンを使用していました：フォントawesome 5 cdnを使用していたように。

しかし、同じクラスを選択してアイコンを編集しようとすると、CSS編集はアイコンで実行されませんでした。

そのため、cssセレクターの「.fas fa-plus-square」から「fas」を削除し、「。fa-plus-square {}」にしました。

したがって、CSSは次のようになりました（私にとって）：.fa-plus-square{ float: right; }ここで、「fas」を削除しました。そしてそれは私のために働いた。

htmlクラスは<i class="fas fa-plus-square"></i>

そして、私が使用したcdn： " https://use.fontawesome.com/releases/v5.0.7/css/all.css "。これがあなたを助けることを願っています

0
Prottay Rudra

FontAwesomeを含める場合、指定したURLはheadタグとしてstylesheetファイル内にある必要があります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

その後、Font Awesomeを使用したとおりに使用できます。

0
Gobbin