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/




  • アイコンフォント「FontAwesome」の使い方
  • 無料で使用できる!450種類以上のラインアイコン「LineIcons」
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • 500種類以上のアイコンフォントとCSSのツールキット「Fontisto」
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
RELATED POSTS
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
  • 【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
RECENT POSTS
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
  • 様々なシーンのイラストを無料でダウンロードできる「ManyPixels Illustration Gallery」
  • Glyphy(絵文字)をコピペできるシンプルなツール「Glyphy」
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
INSPIRATION
  • 国内のWebデザイン

  • 海外のWebデザイン

  • LP・ランディングページ

  • レスポンシブWebデザイン