初心者、FontAwesomeをcssで使う。

 

FontAwesomeの柄、かわいいから、サイトに出したい。

初心者の私でも、そんなことを思ってしまいました。

思い立ったが吉日。ということで、早速挑戦。

初心者、FontAwesomeをcssで使う。

 

今回の先生:Qiita:Fontawsome をcssで使う

 

「style.css」にこのようなコードを追加します。

h1:before {
  content: "\f14a";
  font-family: FontAwesome;
}

たったこれだけです。
これなら初心者の私でも簡単です。最高!イージーイージー!(笑)

 

自分で変えるのは下線部だけでOKです。

 

★青色の下線部
→自分がFontAwesomeの柄を表示させたいときの文字の大きさを入力します。
h1でも、h2でも、h3でも、h4でも。なんでもOKです。

★赤色の下線部
→FontAwesomeの中の、自分が使いたい柄のコードを入力します。
 私は、こちらのサイトを参考にしました。
  Fontawesomeのcss表記まとめ

※本来のFontAwesomeのサイトに書かれているのは、css用のコードではなくて、html用のコードなので、cssファイルでは使うことができません。

 

 

最近デザインのことばかり凝りすぎて、本来の旅系の記事が全く書けていませんが、

まあそういうこともあります。

人間だもの。つなお
(なんだかキャラが定まっておりません。(笑))

2017-12-24 ツナ

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です