みなさま、こんにちは。
文の前にアイコンを設定したく、マニュアルをみながらやっていましたが、
以下のコードだと「見出しにアイコンを使おう」の前に表示させたいアイコンが文字化け時の豆腐アイコンになっています。
こちら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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/28 05:41