質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

853閲覧

FontAwesome5 疑似要素の文字化け

reotantan

総合スコア295

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2018/05/28 03:26

みなさま、こんにちは。
文の前にアイコンを設定したく、マニュアルをみながらやっていましたが、
以下のコードだと「見出しにアイコンを使おう」の前に表示させたいアイコンが文字化け時の豆腐アイコンになっています。

こちらFont-Awesomeのスクリプトは読み込んでいますし、その上でunicodeも設定しているのですが、どこかに誤りがあるようです。

ご指摘いただけないでしょうか。

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <script> FontAwesomeConfig = { searchPseudoElements: true }; </script> <style> h3:before{ font-family:Font Awesome 5 Free; content: "\f359"; padding-right:5px; color: red } h4:before{ font-family:Font Awesome 5 Free; content:"\f359"; padding-right:5px; color:blue; } blockquote{ position: relative; background: #EFEFEF;/*背景色*/ padding: 20px 10px 15px;/*ボックス内の余白*/ } blockquote:before{ position: absolute; font-family: Font Awesome 5 Free; content: '\f10d'; top: 10px;/*上からの距離*/ left: 10px;/*左からの距離*/ color: silver; font-size: 1.5em; } </style> </head> <body> 炎<i class="fas fa-arrows-alt-h fa-2x fa-spin"></i>水 <br> <h3>見出しにアイコンを使おう</h3> <h4>見出しにアイコンを使おう2</h3> <blockquote> <p>これは引用の文章です。</p> </blockquote> <i class="fab fa-accessible-icon"></i> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

<head>内に下記を記述し、CSSでwebフォント版を読み込む

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

CSSを修正

css

1 <style> 2 h3:before{ 3 font-family:'Font Awesome 5 Free'; /* シングルコーテーションで囲む */ 4 content: "\f359"; 5 padding-right:5px; 6 color: red; /* セミコロンが抜けてた */ 7 } 8 h4:before{ 9 font-family:'Font Awesome 5 Free'; /* シングルコーテーションで囲む */ 10 content:"\f359"; 11 padding-right:5px; 12 color:blue; 13 } 14 blockquote{ 15 position: relative; 16 background: #EFEFEF;/*背景色*/ 17 padding: 20px 10px 15px;/*ボックス内の余白*/ 18 } 19 20 blockquote:before{ 21 position: absolute; 22 font-family:'Font Awesome 5 Free'; /* シングルコーテーションで囲む */ 23 content: '\f10d'; 24 top: 10px;/*上からの距離*/ 25 left: 10px;/*左からの距離*/ 26 color: silver; 27 font-size: 1.5em; 28 font-weight: 600; /* 一部のフォントはweight指定が必要な様子。501以上で表示されたことを確認しました */ 29 } 30 </style>

投稿2018/05/28 05:09

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reotantan

2018/05/28 05:41

丁寧なご回答ありがとうございました! CSSでwebフォントを読み込む必要性があるんですね、ありがとうございました。
guest

0

ベストアンサー

FontAwesomeConfigは、FontAwesomeを読み込むに指定する必要があります。

なお、SVG+疑似要素は公式で「おすすめしない」とされています。

  • 疑似要素を使わずに書く
  • 疑似要素を多用するのであれば、従来のようなWebフォント版を使う

のがいい、とのことです。

投稿2018/05/28 04:59

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問