LINEロゴのスクエア型アイコンフォントがなかったので作ってみました

四角い形をしたLINEのWEBアイコンフォントがネットを探しても無かっので作ってみました。

以下のようなアイコンフォントが利用できます。

LINEのSVG

スポンサーリンク
レクタングル(大)広告

LINEのアイコンフォント

LINEのSVG

上記にあるスクエア型ではないLINEアイコンフォントは、既に以下のサイトなどにありますので、そちらを利用した方がいいかもしれません。

Ligature Symbols

Ligature Symbols

スクエア型でないロゴでも、以下に書かれているような、使い方をすればスクエア型として表示はできます。

日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法
今回は、日本でよく利用されているWEBサービスのアイコンフォントファイルと、使い方をまとめてみました。 でき上がりはこんな感じ...

ただ、当サイトのフォローボタンなどは、すべてスクエア型のアイコンフォントを利用しているため、今回その仕様に合わせるためにスクエア型の、LINEアイコンフォントを作成しました。

スクエア型のフォローボタン

SVGファイルの作成

アイコンフォントを作成するには、まずSVGファイルを作成する必要があります。

SVG 【 Scalable Vector Graphics 】
XMLベースの2Dベクター画像記述言語。 ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。

SVGとは:IT用語辞典

SVGファイルを作成する方法として、以前feedlyのアイコンフォントを作成したのと全く同じ方法で行いました。

自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)
最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色...

上記の方法は、画像素材さあれば、誰でも簡単にSVGファイルを作成できると思います。

画像素材は、LINEロゴの利用についてにある公式素材を利用させてもらいました。

SVGファイルは以下からダウンロードできます。

SVGファイルの利用は、LINEロゴ利用ガイドラインに準じて行ってください。

アイコンフォントの作成

アイコンフォントの作成は、IcoMoonで行いました。

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

先程の、SVGファイルをインポートして利用すると、IcoMoon上でサイトに合うように細かな調整ができるのでいいかもしれません。

SVGファイルのインポート

僕が作成したそのままのものは、以下からダウンロードできます。

アイコンフォントの利用は、LINEロゴ利用ガイドラインに準じて行ってください。

大きさの調整の仕方

今回僕が作成した、アイコンフォントは、デフォルト状態でFont Awesomeのものより大きいです。

大きさを調節するには、IcoMoonのインポートボタンから

SVGファイルのインポート

配布してあるアイコンフォントフォルダ内の「selection.json」を選択してください。

selection.json

すると、以下のように表示されるので、アイコンを選択して「Generate Font」をクリックしてください。

アイコンを選択してgenerate

あとはアイコンを選択して、

generateしたアイコンを選択

アイコンを編集画面で「スケールダウン」「スケールアップ」ボタンで大きさを調節できます。

スケールアップ・スケールダウンボタン

大きさの調節が済んだら、ダウンロードボタンから再ダウンロードすればOKです。

ダウンロードボタン

IcoMoonの使い方

IcoMoonの使い方を見るには、フォルダ内の「demo.html」のソースを見るのが最も分かりやすいと思います。

demo.html

簡単に説明すると、<head></head>内でIcoMoonのスタイルを読み込みます。

あとは、HTMLで以下のように書いて利用します。

まとめ

今回作成したアイコンフォントを以下のように利用できるようになりました。

作成したLINEアイコンフォント

「スクエア型のラインアイコンフォントを利用したい」なんて需要があれば、利用してみてください。