$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

Font Awesome アイコンフォントをブログ記事に加える設定、導入利用方法

Font Awesome アイコンフォントをブログ記事に加える設定、導入利用方法
人気ブログやサイトなどで、アイコンフォントと呼ばれる , , , , などのアイコンが使われていることを良く目にします。 アイコンフォントは、サイトのコンテンツのちょっとしたアクセントにもなります。

アイコンフォントは、無料で手軽に利用することができます。WordPressでは、Font Awesomeなどを利用するプラグインがあり、それらで手軽に利用可能です。

Blogger等の無料ブログでも、Font Awesomeを始めとして、アイコンフォントを簡単に導入することができます。
[post_ads]

Font Awesomeをブログに導入する方法

アイコンフォントのリーディングサプライヤーのFont Awesome のBloggerでの導入手順を以下に紹介します。

事前準備

上記コードを設置する前に、テンプレートのソースコード内を"fontawesome"で検索して、スクリプトコードが設置されているか事前に確認します。

高機能のテンプレートの多くは、Font Awesomeのアイコンフォントを標準でサポートしています。既にスクリプトコードが設置されている場合は、スクリプトコードの設置は必要ありません。
備考:
Blogger MagOneテンプレートは、標準でFont Awesomeをサポートしています。スクリプトコードの設置は必要ありません。

スクリプトコードの設置

Font Awesomeのアイコンフォントを読み込むための以下のスクリプトコードをコピーして、サイトの<head>タグ内に貼り付けます。
[<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>]
設定は以上です。上の一行を加えるだけで、アイコンフォントが使えるようになります。

Font Awesomeの使い方

Font Awesomeは、インライン エレメント(<i>タグ)を使用して記事内に設置します。記事内でアイコンフォントを加える場合は、編集モードをHTMLにして、アイコンフォントを加える場所に入力します。以下はコードの例です。サイズを大きくしたり、小さくしたり、色を付けることができます。

[<i class="fa fa-coffee"></i>
<i class="fa fa-coffee" style="font-size:48px;"></i>
<i class="fa fa-cofee" style="font-size:60px;color:red;"></i>]

備考:
<head>タグ内に設置するスクリプトコードのバージョンで、クラス(class)の設定が若干異なります。

ここで紹介する例は、バージョン4を使用しています。"<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">"を設置した場合です。MagOneでの使用例です。上で紹介したスクリプトコード(バージョン5)の場合は、"<i class="far fa-coffee"></i>"になります。

上記は使用の一例です。アイコンフォントは色々な使い方ができます。使用方法について詳しくは、Font Awesome のページをご参照下さい。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Font Awesome アイコンフォントをブログ記事に加える設定、導入利用方法
Font Awesome アイコンフォントをブログ記事に加える設定、導入利用方法
アイコンフォントは、無料で手軽に利用することができます。利用することで、コンテンツのちょっとしたアクセントになります。Blogger等の無料ブログでも、Font Awesomeを始めとして、アイコンフォントを簡単に導入することができます。
https://4.bp.blogspot.com/-VlavOyaV3TA/WooVRXFiJfI/AAAAAAAACKU/m4Tc6i3J3jIpmkRADHUDekvpq-9YPdtuQCK4BGAYYCw/s640/How%2Bto%2Buse%2BFont%2BAwesome.png
https://4.bp.blogspot.com/-VlavOyaV3TA/WooVRXFiJfI/AAAAAAAACKU/m4Tc6i3J3jIpmkRADHUDekvpq-9YPdtuQCK4BGAYYCw/s72-c/How%2Bto%2Buse%2BFont%2BAwesome.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/how-to-use-font-awesome.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/how-to-use-font-awesome.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy