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

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

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

 こういう感じ。

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

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の使い方いい感じになりました!

HTML/CSSを基礎から勉強したい方へ

HTML/CSS初心者のための書籍を執筆しました

個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

これから初めてHTML・CSSに触れる方や、過去に個人サイトを作ったことがあるけど、最新のHTML・CSSやウェブサイト制作を学び直したい!という方に向けた、創作・同人サイトを作るための本です。
書籍購入者には特典として、「do」でも配布していないオリジナルHTMLテンプレート3種が利用できます。本書では、このテンプレートを実際に自分で編集することでHTML・CSSを学んでいくため、初めての方でも理解しやすい内容に仕上がっています。
「do」では紹介しきれなかった、サイト制作の基礎の基礎から網羅した入門にオススメの書籍です。ぜひお手に取ってみてください!

Amazonで購入する