四角い形をしたLINEのWEBアイコンフォントがネットを探しても無かっので作ってみました。
以下のようなアイコンフォントが利用できます。
LINEのアイコンフォント
上記にあるスクエア型ではないLINEアイコンフォントは、既に以下のサイトなどにありますので、そちらを利用した方がいいかもしれません。
スクエア型でないロゴでも、以下に書かれているような、使い方をすればスクエア型として表示はできます。
ただ、当サイトのフォローボタンなどは、すべてスクエア型のアイコンフォントを利用しているため、今回その仕様に合わせるためにスクエア型の、LINEアイコンフォントを作成しました。
SVGファイルの作成
アイコンフォントを作成するには、まずSVGファイルを作成する必要があります。
SVG 【 Scalable Vector Graphics 】
XMLベースの2Dベクター画像記述言語。 ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGファイルを作成する方法として、以前feedlyのアイコンフォントを作成したのと全く同じ方法で行いました。
上記の方法は、画像素材さあれば、誰でも簡単にSVGファイルを作成できると思います。
画像素材は、LINEロゴの利用についてにある公式素材を利用させてもらいました。
SVGファイルは以下からダウンロードできます。
SVGファイルの利用は、LINEロゴ利用ガイドラインに準じて行ってください。
アイコンフォントの作成
アイコンフォントの作成は、IcoMoonで行いました。
IcoMoon App – Icon Font, SVG, PDF & PNG Generator
先程の、SVGファイルをインポートして利用すると、IcoMoon上でサイトに合うように細かな調整ができるのでいいかもしれません。
僕が作成したそのままのものは、以下からダウンロードできます。
アイコンフォントの利用は、LINEロゴ利用ガイドラインに準じて行ってください。
大きさの調整の仕方
今回僕が作成した、アイコンフォントは、デフォルト状態でFont Awesomeのものより大きいです。
大きさを調節するには、IcoMoonのインポートボタンから
配布してあるアイコンフォントフォルダ内の「selection.json」を選択してください。
すると、以下のように表示されるので、アイコンを選択して「Generate Font」をクリックしてください。
あとはアイコンを選択して、
アイコンを編集画面で「スケールダウン」「スケールアップ」ボタンで大きさを調節できます。
大きさの調節が済んだら、ダウンロードボタンから再ダウンロードすればOKです。
IcoMoonの使い方
IcoMoonの使い方を見るには、フォルダ内の「demo.html」のソースを見るのが最も分かりやすいと思います。
簡単に説明すると、<head></head>内でIcoMoonのスタイルを読み込みます。
|
1 |
<link rel="stylesheet" href="icomoon/style.css"> |
あとは、HTMLで以下のように書いて利用します。
|
1 2 |
<span class="icon-line"></span> <span class="icon-line-square"></span> |
まとめ
今回作成したアイコンフォントを以下のように利用できるようになりました。
「スクエア型のラインアイコンフォントを利用したい」なんて需要があれば、利用してみてください。
