超現場ブログ

Technique,Design and Events

よく使うアイコンフォントのサービスについて

Twitter Facebook Google+ はてブ

blog

info最近は、アイコンを使うのに、アイコンフォントのサービスを利用する事が多くなりました。とっても便利に使えるので、使い方を覚えておいて損はないと思います。

Font Awesomeについて

最近は、アイコンを使うのに、アイコンフォントのサービスを利用する事が多くなりました。とっても便利に使えるので、使い方を覚えておいて損はないと思います。

Font Awesome

Font Awesomeの使い方

使い方もとても簡単です。CDNを使う方法と、ダウンロードする方法の2種類の使い方があります。今回は、より簡単なCDNを使う方法をご紹介します。

1.以下のページにアクセスします

http://fontawesome.io/get-started/

2.以下のページにアクセスします
メールアドレスを書いて、「Send my Font Awesome embed code!」のボタンを押します。
スクリーンショット-2017-09-22-20.29.52 (1)

3.メールで必要なコードが送られてくるので、linkタグのコードをhtmlファイルにコピーペーストします。
スクリーンショット-2017-09-22-20.53.56 (1)

4.こちらにアクセスします。
http://fontawesome.io/icons/
使いたいアイコンを選び、クリックすると、htmlコードが出てくるので、そのコードをコピーペーストします。

スクリーンショット-2017-09-22-20.32.28 (1)

スクリーンショット-2017-09-22-20.32.51 (1)

こんな感じの手順です。

僕がよく使うアイコン

Font Awesomeは、大量のアイコンがサクッと使えてとても便利です。
が、大量すぎて、いざ使おうとすると、使いたいアイコンが見つかりにくかったりします。
以下に、僕がよく使うアイコンを書いておきます。
bookmark

<i class="fa fa-bookmark" aria-hidden="true"></i>

check-circle-o
<i class="fa fa-check-circle-o" aria-hidden="true"></i>

check-square
<i class="fa fa-check-square" aria-hidden="true"></i>

comment-o
<i class="fa fa-comment-o" aria-hidden="true"></i>

desktop
<i class="fa fa-desktop" aria-hidden="true"></i>

envelope-o
<i class="fa fa-envelope-o" aria-hidden="true"></i>

exclamation-triangle
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

user-o
<i class="fa fa-user-o" aria-hidden="true"></i>

exclamation-circle

<i class="fa fa-exclamation-circle" aria-hidden="true"></i>

folder-o
<i class="fa fa-folder-o" aria-hidden="true"></i>

gear
<i class="fa fa-cog" aria-hidden="true"></i>

group

<i class="fa fa-users" aria-hidden="true"></i>

info

<i class="fa fa-info" aria-hidden="true"></i>

info-circle
<i class="fa fa-info-circle" aria-hidden="true"></i>

male
<i class="fa fa-male" aria-hidden="true"></i>

female
<i class="fa fa-female" aria-hidden="true"></i>

plus
<i class="fa fa-plus" aria-hidden="true"></i>

question
<i class="fa fa-question" aria-hidden="true"></i>

question-circle
<i class="fa fa-question-circle" aria-hidden="true"></i>

question-circle-o
<i class="fa fa-question-circle-o" aria-hidden="true"></i>

star
<i class="fa fa-star" aria-hidden="true"></i>

star-o
<i class="fa fa-star-o" aria-hidden="true"></i>

user
<i class="fa fa-user" aria-hidden="true"></i>

user-o
<i class="fa fa-user-o" aria-hidden="true"></i>

angle-right
<i class="fa fa-angle-right" aria-hidden="true"></i>

caret-right
<i class="fa fa-caret-right" aria-hidden="true"></i>

まとめ

アイコンフォントは、とても便利で使い勝手が良いので、ぜひ使ってみてください。

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.