音楽と最新テクノロジーであなたの人生を、ちょっとだけ楽しくする個人メディア

6.19.2016

コピペでOK!無料webアイコン「Font Awesome」の使い方を伝授します

2016 06 19 7 17 14

コピペだけで使える無料のアイコン、「Font Awesome」がオススメだぞ!

 

Font Awesomeとは?

Font Awesome」とは、アイコンを無料のWebフォントとして利用できるサービスのことです。フォントだから、サイズや色などはCSSでカスタマイズすることができるんですよ!

リンク: Font Awesome, the iconic font and CSS toolkit

ライセンスはこちらから、ご確認くださいね。

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

Font Awesome License

 

コピペでOK!使い方。

導入するにはhtmlを書き換えますので、テンプレートなど、必ずバックアップしてください。

<head><head>内にコードを書き込む

2016 06 19 7 36 48

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Get Started Using CSS

↑こちらのコードを<head><head>内に、書き込んでください。あとは、手順に沿ってアイコンを表示させたい場所に、個別コードをコピペするだけで大丈夫です。。

 

使い方の手順

2016 06 19 7 40 56

Font Awesome」トップページ、上部の「Icons」をクリックします。

2016 06 19 7 41 34

アイコンの一覧が表示されましたね。どれを使っていいのか探すの大変だから...

2016 06 19 7 41 24

こんな感じで、RSSマークを探すときは検索で「rss」と打ち込むといいかもしれません。旗を探すときは、「flag」です。英単語わからないときは、エキサイト翻訳がオススメ。

2016 06 19 7 41 52

アイコンをクリックすると、この画面に移動します。表示されているhtmlタグをコピペして、自分のブログの表示させたい場所に書いちゃいましょう!このように表示されます↓

 

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

カスタマイズについては「 Looking for more? Check out the examples.」と表示されていますね。リンク先は英語なので汗。必要そうなところだけ、抜粋しますね。

 

大きさを変える

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-rss fa-lg"></i> fa-lg
<i class="fa fa-rss fa-2x"></i> fa-2x
<i class="fa fa-rss fa-3x"></i> fa-3x
<i class="fa fa-rss fa-4x"></i> fa-4x
<i class="fa fa-rss fa-5x"></i> fa-5x

classの要素内に「fa-2x〜fa-5x」を入れてあげるって、考え方ですね。簡単!

 

横幅を揃える

トップ
写真
Rss
あとで読む

<i class="fa fa-home fa-fw"></i>トップ
<i class="fa fa-camera fa-fw"></i>写真
<i class="fa fa-rss fa-fw"></i>Rss
<i class="fa fa-flag fa-fw"></i>あとで読む

fa-fw入れておかないと、アイコンと文字がくっつくので、入れておいた方が無難です。

 

記事下の最適化に便利

2016 06 19 7 37 26

↑画像をご覧ください。あんちゃさんのブログ「まじまじぱーてぃー」の記事下が、とても可愛買ったので真似してみようと思います。

  • リストは
  • だいたい
  • こうすれば
  • いいよね?

<li>リストは</li>
<li>だいたい</li>
<li>こうすれば</li>
<li>いいよね?</li>

問題は、RSSマークとか、ハートとか、メガホンのマークが自分で画像を用意するのは手間ですよね。そんな時に、Font Awesomeだと、コピペするだけで簡単で可愛く、スマートなアイコンを無料で使うことができるんです

 

 

 

こんな感じでね!

 

まとめ

カスタマイズは奥深く、アニメーションだったり、色を変えられたりします。ブログ下部を最適化するだけなので、大きさと横幅を揃えることができれば十分です。

いかがでしたでしょうか?今回紹介した「Font Awesome」を利用して、手軽に、簡単に、イケダハヤトさんや、あんちゃさんのようなスマートで有益なブログ下部を構築していきましょう!

それでは、すべてのブロガーに幸あらんことを。サウンドオルビス(@soundorbis)でした。

 

Font Awesome

Font Awesome, the iconic font and CSS toolkit

soundorbis.comの
最新情報をキャッチ!!

  • プッシュ通知を受け取る

  • 更新ツイートを受け取る

  • follow us in feedly

    無料購読する

  • YouTubeチャンネル