Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

HTML、CSS番外編②~Webアイコンフォント、Font Awesomeを使ってみよう‼~

$
0
0

超便利なFont Awesomeを使って、Webアイコンフォントを手に入れよう

今回はWebページ内にアイコンを導入するやり方を紹介していきます:relaxed:
Font Awesomeというサービスを使って、簡単にWebアイコンフォントが手に入ります:point_up_tone2:
Font Awesomeの導入方法から、アイコンの編集の仕方も紹介していきます。

今回の記事:arrow_down:

  • Webアイコンフォントって何?
  • Font Awesome導入方法
  • アイコンを編集してみよう
    • アイコンの大きさを変える
    • アイコンの色を変える
    • アイコンと文字の間にスペースを作る
    • 回転させる(アニメーション)

Webアイコンフォントって何?

Webアイコンフォントとはフォントとして使用することができるアイコン素材です。
よくWebページなどで目に付くアイコンはTwitterやInstagramなどのSNSのアイコンがありますね:grinning:アイコンはWebページをデザインうえで欠かせないものなのです:bangbang:
SNS.png

アイコンフォントを使用するメリットとしては、CSSで大きさや色が変えられたり、ファイルサイズも小さいので、ファイルサイズを抑えることができます。:point_down_tone2:

Font Awesome導入方法

そんなWebアイコンフォントを導入するには、いつくかサービスはありますが、Font Awesomeがおすすめです:heart_exclamation:
ここではFont Awesomeの使い方を紹介していきます。導入方法は簡単で、アイコンの種類もたくさんあります。

まず以下のコードをHTMLの<head>内に書きます。

HTMLの<head>内
<linkhref="https://use.fontawesome.com/releases/v5.6.1/css/all.css"rel="stylesheet">

Font Awesome:point_down_tone2:
FontAwesome.png

Font Awesomeのサイトに行き、使いたいアイコンを選びます:point_down_tone2:
image.png

使いたいアイコンをクリックし、Start Using This Iconをクリック:point_down_tone2:
image.png

HTMLコードをコピーして、貼り付ければ導入完了です:point_down_tone2:
image.png

※最近の新しいバージョンはメールアドレスを登録して使えるようになっています。

登録する場合はStart for Free:point_down_tone2:
startfree.png

メールアドレスを入力し、Create & Use This kitをクリック:point_down_tone2:
メールアドレス.png

以下のようなメールが届くので、Click To Confirm Your Email Address + Set Thisgs upをクリックし、設定します:point_down_tone2:
image.png

会員登録を無事完了するとKit CodeというものがCopyできるので、それをHTMLの<head>内に埋め込みましょう:exclamation:
後は先程と同じように導入したいアイコンを選択して入れます。

アイコンを編集してみよう

アイコンの導入が完了しました!!導入しただけのアイコンは、小さく、色は黒です。
大きさを変えたり、CSSを使ってよりおしゃれなアイコンにしてみましょう:heart_eyes:

アイコンの大きさを変える

FontAwesomeでは、アイコンの大きさを簡単に変えられます。

今回はこのアイコンを使用していきます。
image.png

使用するアイコンHTML
<p><iclass="fab fa-apple"></i></p>

上記のコードのi class="〜"内に書くことでサイズを大きくすることができます。

アイコン2倍HTML
<p><iclass="fab fa-apple fa-2x"></i></p>

サイズ表

  • fa-xs:0.75倍
  • fa-lg:1.33倍
  • fa-2x:2倍
  • fa-3x:3倍
  • fa-4x:5倍
  • fa-5x:7倍

全部のサイズ感はこんな感じです:point_down_tone2:
apple.png

自分のページのバランスなどを考えるといいですね!
もちろんCSSでも調整可能です。

アイコンの色を変える

次は色を変えていきましょう。CSSを使っていきますのでクラスを追加しましょう。
使用するアイコンは引き続きリンゴです。赤いリンゴと、青いリンゴを作ってみます。

使用するアイコンHTML
<p><iclass="fab fa-apple fa-3x"></i></p><p><iclass="fab fa-apple fa-3x"></i></p>

ここにクラス名以下とし、追加します。
クラス名:red_apple 赤いリンゴ
クラス名:blue_apple 青いリンゴ

クラス名追加HTML
<p><iclass="fab fa-apple fa-3x red_apple"></i></p><p><iclass="fab fa-apple fa-3x blue_apple"></i></p>
CSS
.red_apple{color:red;}.blue_apple{color:blue;}

image.png

色が付けられました。SNSのマークなどは、そのままの色を再現するとわかりやすいです。

アイコンと文字の間にスペースを作る

アイコンと文字の間にスペースがないと、詰まって見えてしまいます。
image.png

HTML
<p><iclass="fas fa-home"></i>HOME</p><p><iclass="fas fa-bars"></i>MENU</p><p><iclass="fas fa-cog"></i>SETTINGS</p>

こちらも簡単にスペースを追加できますので、ぜひ参考にしてみてください。
fa-fwという名前のclassをiタグに追加だけで、前後にちょっとした余白が作られます。

HTML
<p><iclass="fas fa-home fa-fw"></i>HOME</p><p><iclass="fas fa-bars fa-fw"></i>MENU</p><p><iclass="fas fa-cog fa-fw"></i>SETTINGS</p>

image.png

少し余白が入り、違和感がなくなりましたね。

回転させる(アニメーション)

何と簡単に回転させることなんかも可能です。

image.png

使用するアイコンHTML
<iclass="fas fa-fan"></i><iclass="fas fa-question-circle"></i>

fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。

回転HTML
<iclass="fas fa-fan fa-spin"></i><iclass="fas fa-question-circle fa-spin"></i>

GIF 2020-05-17 11-13-02.gif

便利なのでぜひFont Awesome使ってみてくださいね:kissing_heart:


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>