AMPロゴマークのアイコンフォントを作るためにSVGを作成

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

amp-brand-blue

先日、WordpressテーマでAMPロゴマークのアイコンフォントを使いたくなりました。

それで、何処かにSVGファイルの無償ダウンロードページがないかと探してみたのですが、見つからなかったので自作してみました。

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

使用したAMPロゴマーク

とは言っても、AMPプロジェクトのサイトに「ロゴマーク&ロゴ」の以下のようなSVGファイルはありました。

amp-brand-blue

ですので、「上記のSVGファイルのロゴマーク部分」だけを利用する形で、「AMPロゴマークのSVGファイル」を作成してみました。

で、作成したものが以下。右クリックからダウンロードできます。

amp-logo

SVGファイルを編集するのに、無料ツールのInkscapeを利用しました。

その他に、画像などからロゴマークSVGを作成したい場合は、以下の方法で結構手軽に作れるかと思います。

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

あと一応、今後何かに使えるかもしれないので、大きなPNGも作っておきました。

amp-logo

アイコンフォントを作成する

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

SVGからアイコンフォントを作成するには、IcoMoonというWEBサービスを利用するのが最も手っ取り早いかと思います。

アイコンフォントを作成するには、IcoMoon上にある「Import Icons」ボタンをクリックすると「ファイル選択ダイアログ」が表示されるので、SVGファイルを選択します。

インポートアイコンボタンをクリック

SVGファイルを選択すると、操作パネル上に「作成したSVGロゴマーク」が表示されると思うので、それを確認したら「Generate Font」をクリックしてください。

SVGロゴ選択後、フォント生成

あとは、アイコンフォントの呼び出し名を設定したら「Download」ボタンを押せば、作成されたアイコンフォントがダウンロードできます。

IcoMoonで呼び出し名の設定

HTMLなどで、アイコンフォントを使用する方法については、いかに詳しく書いてあるので、使い方がわからない場合は参照してみてください。

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

まとめ

今回作成した、SVGファイルは、ベクター画像などに、あまり詳しくない素人が編集したものですので、そこら辺はご了承ください。

正直、あまり使いどころはないと思いますが、とりあえず僕の目的は達成されました。

とはいえ、そのうちFont Awesomeとかで作られるのではないかと思います。