Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」

有名なアイコンフォントFontAwesomeのアイコン(~1380個)をカバーしたラインアイコンセット「Line Awesome」がicon8で公開されていたので忘備録。ラインアイコンが好みというデザイナー向けに、Font Awesome 5.11.2の無料の代替アイコンとして作成されたそうです。ダウンロード版もありますがCDNを使用した使い方も解説します。





Line Awesomeの使い方




1

「Line Awesome」とは?

Font Awesomeのアイコンをカバーしてるので、Font Awesomeを使用してるページのCDNをLine AwesomeのCDNに変更するだけでラインアイコンが適用されるようになります。新規で使用する場合のCDNも用意されているので、用途に合わせ使い分けましょう。

アイコンが綺麗に表示されるサイズはFont Awesomeが14×14ピクセルに対して、Line Awesomeは32×32ピクセルになっています。当然小さく表示する場合は、ラインが潰れてしまうケースもありますので、32×32ピクセル以上で扱うほうがよいでしょう。


ソーシャル・PC系アイコン


ビジネス系アイコン


ブログ系アイコン


ショップ系アイコン




2

Line Awesome導入の準備


Font AwesomeをLine Awesomeに変更する場合

TOPページから「Getting Started 」をクリックしHow to InstallからCDNをコピーしFont AwesomeのCDNと差し替えます。

html
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">

新規でLine Awesomeを使用する場合

新規でLine Awesomeを使用する場合は同様にHow to Installから下段のCDNをコピーし表示させたいページのhead内にペーストします。

html
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.1.0/css/line-awesome.min.css">
CDNはバージョンアップされている場合がありますので、Line Awesomeのサイトで最新のCDNをコピペしてください。



3

Line Awesomeの使用方法

Line Awesomeを新規で使用する場合の使い方です。CDNのコピペが完了したらLine Awesome からページから使用したいアイコンを探します。使用したいアイコンが見つかったらアイコンをクリックしてコードをコピー、表示させたい箇所にペーストでアイコンが表示されます。

html
<i class="lab la-twitter"></i>

4

アイコンのカラーを変更する

Font Awesomeを同様にアイコンのカラーをCSSで変更することができます。

html
<span style="font-size: 3em; color: Tomato;">
  <i class="las la-stroopwafel"></i>
</span>

<span style="font-size: 3em; color: Dodgerblue;">
  <i class="las la-stroopwafel"></i>
</span>

<span style="font-size: 3em;">
  <span style="color: Mediumslateblue;">
  <i class="las la-stroopwafel"></i>
  </span>
</span>

5

アイコンのサイズを変更する

サイズのclassが用意されているのでサイズを変更したい場合はclassにla-xsla-smla-lgla-2x~la-10xを追加します。 もちろんオリジナルのCSSを追加しfont-sizeでサイズを変更することもできます。

html
<i class="las la-stroopwafel la-xs"></i>
<i class="las la-stroopwafel la-sm"></i>
<i class="las la-stroopwafel la-lg"></i>
<i class="las la-stroopwafel la-2x"></i>
<i class="las la-stroopwafel la-3x"></i>
<i class="las la-stroopwafel la-5x"></i>
<i class="las la-stroopwafel la-7x"></i>
<i class="las la-stroopwafel la-10x"></i>

6

アイコンの向きを変更する

角度のclassを追加することで角度(90°/180°/270°)反転(水平/垂直)を変更することができます。

html
<i class="lab la-font-awesome"></i>
<i class="lab la-font-awesome la-rotate-90"></i>
<i class="lab la-font-awesome la-rotate-180"></i>
<i class="lab la-font-awesome la-rotate-270"></i>
<i class="lab la-font-awesome la-flip-horizontal"></i>
<i class="lab la-font-awesome la-flip-vertical"></i>
la-rotate-90 90°
la-rotate-180 180°
la-rotate-270 270°
la-flip-horizontal 水平(横)に反転
la-flip-horizontal 垂直(縦)に反転

7

アイコンを回転させる

ローディングアニメーションで使えそうな回転するアイコンもclassにla-spinを追加するだけで機能します。 la-pulseにすると、8ステップで1回転するアニメーションとなります。

       
html
<i class="las la-spinner la-spin"></i> 
<i class="las la-circle-notch la-spin"></i>  
<i class="las la-sync la-spin"></i>  
<i class="las la-cog la-spin"></i>  
<i class="las la-spinner la-pulse"></i> 


8

アイコンを使ったメニュー

ナビゲーションメニューもアイコンを配置するだけで視覚的にイメージが伝わりやすくなります。

css
.icon02 ul{
	list-style:none;
    border:solid 1px #DDD;
    border-bottom:none;
    }
.icon02 li a{ 
	color:#666;
    display:block;
    border-bottom:solid 1px #DDD;
    padding:10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    }
.icon02 li a:hover{
	background-color:#F2F2F2;
	}
html
<div class="icon02">
<ul>
<li><a href="#"><i class="las la-home la-fw"></i>&nbsp; Home</a></li>
<li><a href="#"><i class="las la-building la-fw"></i>&nbsp; Coporate</a></li>
<li><a href="#"><i class="lar la-handshake la-fw"></i>&nbsp; Business</a></li>
<li><a href="#"><i class="lar la-envelope la-fw"></i>&nbsp; Mail</a></li>
</ul>
</div>

9

疑似要素で使用する

Unicodeもコピペできるので、Font Awesomeと同様にCSSの疑似要素も使えるかな?と名称を変更してみたらできました。
アイコンを使用したい疑似要素::beforefont-family: "Line Awesome Free";とUnicodecontent: "\f099"を記述します。
Unicodeは各アイコンページにてコピーできます。

twitterやfacebookなどのブランド系アイコン(classlab)を使用する場合はfont-family: "Line Awesome Brands";となります。

CSS
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	}
 .login::before {
    font-family: "Line Awesome Free"; font-weight: 900; content: "\f007";
  }
  .tps::before {
    font-family: "Line Awesome Free"; font-weight: 400; content: "\f1ea";
  }
  .twitter::before {
    font-family: "Line Awesome Brands"; font-weight: 400;  content: "\f099";
  }
.icon01 ul{ 
	list-style: none; 
	display: flex;
	}
.icon01 li { 
	width: 33%;
	text-align: center;
	background-color:#666;
	height: 50px;
	line-height: 50px;
	margin:0 2px;
	}
.icon01 li a{ 
	display: block;
	color: #fff;
	}
.icon01 li a:hover{ 
	background-color:#999;
	}
html
<div class="icon01">
<ul>
<li><a href="#"><span class="icon login"></span> Login</a></li>
<li><a href="#"><span class="icon tps"></span> TPS Reports</a></li>
<li><a href="#"><span class="icon twitter"></span> Twitter</a></li>
</ul>
</div>

アニメーション・疑似要素など、Line Awesomeの使い方については、公式サイトにありませんので推奨されてないかも知れませんが、Font Awesomeを同様に扱えるようですね。

アイコンを大きめに表示する場合は、Font Awesomeよりもこちらの方がシャープで使いやすそうな印象です。Font Awesomeの記事で同様のアイコンを表示しているので比較してみてください。

関連記事

アイコンフォント「FontAwesome」の使い方

design.webclips.jp/font-awesome/





\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年11月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選