folderデザインしたい

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方 - https://do.gt-gt.org/use-google-icons/

あなたのサイトに、アクセントとして小さなアイコンを取り入れてみませんか?

 こういう感じ。

カエルのほかにも、
 表情豊かな絵文字や、
 サイトのリンクページに使えそうなブックマーク、さらには
 鳥居の絵文字なんてものもあります。

Line Awesomeというサービスを利用すれば、コードを数行コピペするだけで、あなたのサイトで無料で豊富なアイコンを利用することができるようになります。会員登録なども不要で、とってもお手軽です。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

類似のアイコン配信サービスとして「font awesome」という超有名サービスもありますが、バージョン6へのアップデートに伴い会員登録が必要となり導入が面倒になりました。Line Awesomeは、そんなfont awesomeに対して「もっと手軽に」「font awesomeにはない線形のアイコンを」という意図でリリースされたサービスです

サイトにアクセントとして導入すれば、あなたのサイトがもっと見やすく、可愛らしく、そして自分らしいものになるはず。ぜひ取り入れてみてください。

Line Awesomeの使い方は2ステップ

まずはLine Awesomeにアクセスし「Getting Started」ボタンをクリック。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

<head>内にメタタグを貼り付ける

How to Install」内にCDN(外部サーバーにアップロードされているファイルを利用できるサービス)用のコードがあるので、これをコピーします。

いくつかコードが書かれていますが、今回は「if you are starting a new project, …」と書かれているほうのコードを使います。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
この記事に記載のコードは2023年1月現在のものです。予告なく変更される場合があるので、このコードを利用して上手く動かない場合は、Line Awesomeのページから最新のコードをコピーしてください。

コピーしたタグを、アイコンを利用したいページの<head></head>内にペーストします

アイコンを利用したいところに<i>タグを貼り付ける

さっそくアイコンを利用してみましょう。

Line Awesomeのトップページに戻り、下へスクロールすると、利用できるアイコンの一覧が表示されます。この中から利用したいアイコンをクリックすると、<i>タグが表示されます。これをクリックしてコピーし、HTMLファイルに張り付ければ、アイコンが表示されます。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

膨大な量のアイコンがあるので、検索機能を利用するのもよいでしょう。トップページ上部に「Search icon…」と書かれた検索ボックスがあるので、ここに使いたい絵柄を入力することでアイコンを検索できます。日本語には非対応なので、英単語で検索しましょう。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

アイコンの大きさなどの見た目を調整したい場合

アイコンの大きさを調整したい

<i>タグを貼り付けてそのままだと、アイコンが小さすぎて見えづらい場合があります。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

アイコンの大きさを調整する場合は、<i>タグに対してfont-sizeの値をCSSで追記します。

i.la, i.las, i.lar, i.lab {
font-size: 20px;
}

font-sizeの値はお好みで調整してください。

また、アイコンによって大きさを変えたい場合、<i>タグに直接font-sizeを書き込んで指定してもよいでしょう。

<i class="lar la-smile" style="font-size: 30px;"></i>

上下の位置を調整したい

アイコンを利用してそのままだと、テンプレートによってはアイコンの中央と文字の中央がズレていて、アイコンが少し浮いて見える場合があります。

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方このような状態を解消したい場合は、<i>タグに対してvertical-alignを指定するCSSを追記すれば調整できます。

i.la, i.las, i.lar, i.lab {
vertical-align: middle;
}

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方いい感じになりました!

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう
folderデザインしたい favorite 16

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう

サイトのオリジナリティを上げる!背景・文字色とフォントをオシャレに変える手順
folderデザインしたい favorite 18

サイトのオリジナリティを上げる!背景・文字色とフォントをオシャレに変える手順

加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法
folderデザインしたい favorite 4

加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ
folderデザインしたい favorite 27

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方
folderデザインしたい favorite 61

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方
folderデザインしたい favorite 24

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方