Q&A
「マスク機能」とはなんでしょうか。
あとそもそもfontawsome 本体のCSSは読み込んでいるのでしょうか。
HTMLはなるべく全体提示された方が良いかと思います。
前提・実現したいこと
fontawsomeのマスク機能を使いたい。
（ドットインストールをはじめたところです）
動画と同じコードを入力しても反映されません。
また、別の方の記事にあるコードをコピペしてみても、違う結果になります。
該当のソースコード
html ソースコード <!DOCTYPE html> <html lang="ja"> <head> <mate charset="utf-8"> <title>Fontawsome practice</title> <script src="https://kit.fontawesome.com/175f1afd3d.js" crossorigin="anonymous"></script> </head> <body> <div class="fa-4x"> <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i> </div> </body> </html> 吹き出しの中に鉛筆マークが出るとのことだったのですが、鉛筆マークが大きく表示されるのみです。
補足情報（FW/ツールのバージョンなど）
visual studio code
初歩の初歩を学んでいます。
お手柔らかにお願いします。
あまりメジャーな機能ではないのでしょうか？
アイコンを重ね、重なったところを透過するような感じです。
本体のCSSを読み込むとはどういったことでしょうか
アドバイスありがとうございます。
ドットインストールの動画手順にしたがって、ページ全体ではなく、アイコンをただ表示させるだけを行なっている状態なので、現在以下のコードがあるだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<mate charset="utf-8">
<title>Fontawsome practice</title>
<script src="https://kit.fontawesome.com/175f1afd3d.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
</div>
</body>
</html>
(質問も編集させていただきます)
参考にされた URL 等がある場合は質問に記載していただけないでしょうか。
コメントありがとうございます。
https://dotinstall.com/lessons/basic_fontawesome_v2/41309
こちらの動画を参考にし、実行できなかったので、
https://coliss.com/articles/build-websites/operation/work/font-awesome-guide-and-useful-tricks.html
こちらの記事の「アイコンのマスク」を参考にしましたがやはりうまく行きませんでした。
「アイコンを重ねる」の方は記載の通りになりました。
回答2件
0
ベストアンサー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fontawsomepractiswe</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="fa-5x">
<i class="fas fa-pencil-alt"data-fa-transform="shrink-10 up-.8" data-fa-mask="fas fa-comment" ></i>
</div>
</body>
</html>
コメントをいただきましたがうまくいかず、scriptのままで試行錯誤しました。
無事こちらで表示することができました。（自分で取得したアドレスがよくなかったのかもしてないです。調べ直してうまく行きました。）
初めての質問で不慣れでしたが、コメントくださったみなさま、ありがとうございました！
投稿2020/07/03 14:32
退会済みユーザー
総合スコア0
0
fontawesomeに限らずwebfontを利用する場合
特殊な場合を除き、通常は stylesheet を使用します。
他に特別な理由が無ければ ▼ の scriptは削除しましょう。
html
1<script src="https://kit.fontawesome.com/175f1afd3d.js" crossorigin="anonymous"></script>
▲ のあった位置に ▼ を置きます
html
1<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
この変更をすれば、お使いのソースで表示されると思います^^
投稿2020/07/03 13:18
総合スコア674
ありがとうございます！
先ほど試して見たのですが、表示が全て消えてしまいました。
あなたの回答
tips
プレビュー
