Q&A
仰っている「見出し」はh3タグのことでしょうか。
疑似要素にする必要はないのでは・・
そういえば、Fontawesomeってjsだけでいけるんでしたっけ？
今現在cssから見出しの前にfont awesomeを表示しようとしています。
ですが、font awesome 自体は読みこまれているようですが、cssからの表示ができずに困っています。
HTML
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script src="https://kit.fontawesome.com/d0a13e1880.js" crossorigin="anonymous"></script> 7 <link rel="stylesheet" href="style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <h3>見出しの前にアイコンを表示をしたいです</h3> 12 <i class="fab fa-500px"></i> 13 14</body> 15</html>
CSS
1h3:before 2{ 3 font-family: FontAwesome; 4 font-weight: 400; 5 content: "\f26e"; 6 padding-right : 5px;/*文字との隙間*/ 7 color: #f89174;/*アイコンの色*/ 8}
確認したこと
正しい「font-weightの数値」が入っている
「font-family」の指定が「Fontawesome」とされている
CDNコードが正しく記述されている
CDNコードのバージョンは古くない
無料版を選んでいる
unicodeのバックスラッシュはぬけていない
宜しくお願い致します。
回答ありがとうございます。
そうです。失礼しました。h3タグのことです。
今サルワカ君→https://saruwakakun.com/html-css/basic/before-after
で勉強中でしてなぜ表示されないのかがわからずに質問しました。
Conflict Detection を有効にしてますか？
あ、いや、違うかな？
回答1件
0
ベストアンサー
とりあえず、こうしてみてはいかがでしょうか。
css
1h3:before 2{ 3 font-family: "Font Awesome 5 Brands"; 4 font-weight: 400; 5 content: "\f26e"; 6 padding-right : 5px;/*文字との隙間*/ 7 color: #f89174;/*アイコンの色*/ 8}
参考：
- Update CSS Pseudo-element Rules If you’re using CSS pseudo-elements with version 4, upgrading to version 5 requires a fair amount of manual work. Below are the steps you’ll need to follow:
Update the font-family value - You’ll want to make sure you change the font-family to reference the new version of Font Awesome 5.
投稿2020/09/04 06:51
編集2020/09/04 06:57総合スコア36115
あなたの回答
tips
プレビュー
