Q&A
あえて疑似要素にされる理由は何でしょう。
fontawesomeをCDNではなく、オフラインでも使えるようにしたいためダウンロードをしました。
htmlに貼り付けると表示されますが、疑似要素だと□になってしまいます。
何が原因なのでしょうか？
ダウンロードでやった事
1.fontawesomeのダウンロード
2.コーディングしているフォルダの中のcssフォルダに「all.min.css」ファイルをコピー
3.cssフォルダと同じ階層に「webfonts」のフォルダをコピー
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <link rel="stylesheet" href="../css/all.min.css" /> 9 <link rel="stylesheet" href="../css/style.css" /> 10 </head> 11 <body> 12 <!-- htmlで設置 --> 13 <i class="fab fa-android"></i> 14 <!-- 疑似要素で設置 --> 15 <div class="icon"></div> 16 </body> 17</html>
css
1.fab { 2 font-size: 40px; 3} 4 5.icon { 6 &::after { 7 content: "\f17b"; 8 font-weight: 400; 9 font-family: "Font Awesome 5 Brands"; 10 } 11} 12
回答3件
0
ネストはscssの記法では？
以下内容のstyle.cssであれば疑似要素も表示されると思いますよ。
CSS
1.fab { 2 font-size: 40px; 3} 4 5.icon::after { 6 content: "\f17b"; 7 font-weight: 400; 8 font-family: "Font Awesome 5 Brands"; 9}
投稿2021/11/17 14:23
総合スコア103
0
自己解決
上手くできませんでした。
ダウンロードでFont Awesomeを使う場合は、疑似要素は使わないでコーディングします。
投稿2021/11/19 23:29
総合スコア24
あなたの回答
tips
プレビュー
