1. TOP
  2. >WEB関係>
  3. フリーで使えるWebアイコンをホームページやブログにいかがですか?

フリーで使えるWebアイコンをホームページやブログにいかがですか?

WEB関係

2020/10/12
フリーで使えるWebアイコンをホームページやブログにいかがですか?

この記事は【2020年10月12日】が最後の更新のため、記事の内容が古い可能性があります。

各種アイコンなどフリー素材を配布しているサイトは多いですが、画像をダウンロードしてサーバーにアップしたりなど少し手間がかかりますよね。そんな時はWrbアイコンのサービスを利用するのがおすすめです。

個人的に好きなのがFont Awesomeで、今回はこちらの使用方法について説明したいと思います。

 

Webアイコンについて

Webアイコンは、HTMLのタグや特有のクラス名を付与することで、簡単にWebサイト上にアイコンを表示させることが可能です。
フォント形式なのでCSSでカラーやサイズなども自由にできるのは特徴。
pngやjpegといった画像形式ではないので、読み込み速度などの負荷も軽減されます。

 

CDNでの導入方法

Font Awesomeを利用するには、アカウント登録が必要になりました。
以前はCDNのコードはサイト内に書かれていたんですけどね。

無料で登録することができるので、まずはアカウントを作成しましょう。
登録の仕方は簡単なのですが簡易的に説明します。

 

下記にアクセスしてメールアドレスを入力し「send kit code」と書かれたボタンを押してください。
https://fontawesome.com/start

 

登録したメールアドレス宛に確認のメールが届くので、指示にしたがってアクセスしてください。
あとはアカウント用のパスワードを設定するくらいです。
他のフォームもありますが、そこは任意で大丈夫です。

 

アカウント登録が完了すると、下記のようなコードが出力されるので、そのままheadタグ内に貼り付けます。

以上です。
これでFont AwesomeのWebアイコンを利用できるようになります。

 

Font Awesomeの利用について

 

利用できるWebアイコンはこのページにあります。
https://fontawesome.com/icons

無料と有料のがありますが、無料のでも現時点で1,609種類もあるので困ることは無いかと思います。
このページから検索して使いたいアイコンを探してみてください。

 

まずは表示させてみましょう

 

使いたいアイコンがあったら、それをクリックしてください。
左上にアイコン名とHTMLとUnicodeが表示されています。
こちらをコピーし必要な場所へ貼り付けてください。

・HTMLの場合
HTMLなどのファイルに直接書きこみましょう。

 

表示例

コード内容

 

・Unicodeの場合
CSS利用できます。
例のようにUnicodeで指定すると表示されます。
大事なのは、Unicodeの前に\(バックスラッシュ)を入力するのと、font-familyを指定してください。あとは自由にデザインできます。

表示例
こんにちは

コード内容

用意されているスタイルをつかってアイコンを変化させてみよう

 

Font Awesomeで予め用意されているスタイルを指定することでアイコンを変化させることができます。

 

・拡大

表示例

コード内容

 

・回転
見やすく3xで表示

表示例

コード内容

 

・アニメーション
このようにアイコンを回転させることもできます。

表示例

コード内容

その他にもいろいろなアニメーションが用意されています。

 

head内に、下記のコードを記述してください。
アニメーションに関するcssをCDNで読み込ませます。

クラス名 表示結果
faa-ring animated
faa-vertical animated
faa-vertical animated
faa-flash animated
faa-bounce animated
faa-float animated
faa-spin animated
faa-pulse animated
aa-shake animated
faa-tada animated
faa-passing animated
faa-passing-reverse animated
faa-burst animated
 

上でアニメーションさせているコード

アニメーション効果は、使いすぎると見て目的によろしくないですが、ちょっとした効果を出したい時に良いと思います。

 

WordPress用のプラグインもあります

 

Font Awesomeのプラグインを導入すると、ショートコードやHTMLでWebアイコンを利用することができます。
実際に試したことはないのですが、ショートコードはこのように記述して表示させます。

記入例
[icon name=”stroopwafel”][icon name=”stroopwafel” prefix=”fal”]

プラグインのダウンロードはこちら
https://wordpress.org/plugins/font-awesome/

 

Webアイコンのサービスは他にもあるので
使用したいアイコンが多いサービスをさがしてみるのも良いかと思います。
是非、使ってみてください!

ホームページ制作ならRU DESIGN
ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

ペライチで宣伝用ページを作ってみる
2022/07/23
ペライチでホームページ作成って今までやったことなかったので、なんとなく触ってみたくなったので試してみました。この記事を書きながら作成していきます。  ...
Mac版のGIMPにレイヤー効果を追加
2022/07/14
GIMPにPhotoShopのようなレイヤー効果を追加する方法をご紹介します。Windows版のやり方やレイヤー効果を追加するファイルはすぐに見つかったのですが...
画像をWebPに変換してWEBサイトの表示測度を改善しましょう
2022/07/11
WebP (ウェッピー)は、トラフィック量軽減と表示速度短縮を目的としてGoogleが開発した次世代画像フォーマット(2010年に仕様公表・提供開始)のことで拡...
HTML/CSSのブラウザ対応状況を確認できるサイトまとめ
2022/07/06
HTML/CSSのサポート状況を確認できるサイトをご紹介します。最新の機能を使ってみたい方はチェックしてみると良いかもしれません。ちなみにHTML5は最終バージ...
『やさしい日本語』AIがホームページのテキストを在留外国人に伝わりやすい「やさしい日本語」へ変換
2022/07/05
日立社会情報サービスは、ホームページのテキストを通常の日本語よりも平易な日本語に変換することができる「『やさしい日本語』変換サービス」の販売を開始しました。 在...