これは基本!なフォントアイコン「fontawesome」

2017.09.08|サイト構築

Webページの作成をする上で、最近欠かせなくなってきているのが、Fontawesomeのフォントアイコンです。

画像のアイコンを使用するより、拡大縮小の劣化に影響されないし、カラーの変更も簡単なので本当に重宝しています。

 

フォントアイコン

これはもう、使い始めたら楽すぎてちまちまアイコンなんか作ってられません!

私が好きなのは

fontawesome

http://fontawesome.io/

基本的なアイコンはこれで揃うんじゃないでしょうか。

 

メニュー用のアイコンだけでなく各種SNSのアイコン始め様々なアイコンが揃っています。

 

アイコン一覧はこちら

[su_button url=”http://fontawesome.io/” style=”flat” background=”#ED1E79″ size=”5″ text_shadow=”0px 0px 0px #ffffff”]fontawesomeアイコン一覧[/su_button]

 

fontawesomeをページ内で使用する方法

 

fontawesomeをhtmlページ内で使用する場合を解説します。

 

ダウンロード

まずダウンロードページから必要な一式を丸々ダウンロードします。

 

こちらからダウンロードすることができます。

[su_button url=”http://fontawesome.io/” style=”flat” background=”#ED1E79″ size=”5″ text_shadow=”0px 0px 0px #ffffff”]ダウンロードページへ[/su_button]

 

設定方法

本家サイトではこちらから確認することができます。

Get Started

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

 

worldpressでは、プラグインが出ていますので、そちらをインストールするだけでアイコンを使用することができます。

 

CDNでの利用も可能です。

CDNはBootstrap CDNで提供されています。

 

Bootstrap CDN

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

 

ダウンロードファイルを使用する場合

<!--fontawesome-->
<link href="css/font-awesome.min.css" rel="stylesheet">

<head> ... </head> 内に下記を記述します。

 

フォルダに入れる場合は、ダウンロードしたものを私はそのまま入れています。

Version 4.7.0

  • css
    • font-awesome.min.css
  • scss
    • _animated.scss
    • _bordered-pulled.scss
    • _core.scss
    • _fixed-width.scss
    • _icons.scss
    • _larger.scss
    • _list.scss
    • _mixins.scss
    • _path.scss
    • _rotated-flipped.scss
    • _screen-reader.scss
    • _stacked.scss
    • _variables.scss
    • font-awesome.scss
  • less
    • animated.less
    • bordered-pulled.less
    • core.less
    • fixed-width.less
    • font-awesome.less
    • icons.less
    • larger.less
    • list.less
    • mixins.less
    • path.less
    • rotated-flipped.less
    • screen-reader.less
    • stacked.less
    • variables.less
  • fonts
    • FontAwesome.otf
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff2

 

アイコン表示方法

アイコンを表示させたいところにタグを挿入します。

挿入タグ

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

こちらはアイコン一覧で挿入したいアイコンをクリックすると、コードが確認できます。 私はコピペしてそのまま入れていることが多いです。

表示サンプル

 

worldpressでは、もっと楽にエディターで使えるものなどもありますので、ぜひ活用してみてください。

 

アイコンは様々な使用方法もありますので、

fontawesome Example

http://fontawesome.io/examples/

こちらのページもぜひチェックしてみてください。