超便利、アイコンフォント!Webフォントの活用(2)

(前回から)

Font Awesomeの使い方は3通りあります。
直接HTMLにCSSを書き込んで使う方法と、WordPressなどのプラグインを用いる方法です。
直接CSSを書き込む方が何でもできるのですが、必要十分にして簡単なのはプラグイン利用です。

直接CSSを書き込む方法(外部サイト利用)

これが1番簡単でほとんど何もする必要がありません。
唯一<head>〜</head>に次のスタイルシートを読み込む1行を追加するだけです。
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

直接CSSを書き込む方法(自サイトにインストール)

Font Awesomeのサイトからパッケージをダウンロードして、自サイトにCSSフォルダとfontフォルダを配置します。WordPressサイトで使う場合、WordPressフォルダ直下に配置したとすると、
<head>〜</head>に次のスタイルシートを読み込む1行を追加することになります。
<link href="css/font-awesome.min.css" rel="stylesheet">

専用プラグインの利用

fontawesomeplugin

便利なものでHTMLをいじらなくてもWordPressにはプラグインが用意されています。
Font Awesome Icons(https://wordpress.org/plugins/font-awesome/)をダウンロードしてインストールすればOKです。
前2つと少しコードの書き方が違いますがアイコンを用いるだけでよければこれで十分でしょう。

みなさんも、この便利なWebフォント使ってみませんか?
あなたのホームページがカラフルになること間違いなしです。

Copyright© ちえてらすコンサルティング , 2024 All Rights Reserved.