オリジナルのWebフォントを作成できるサイトIcoMoon

Web制作

SVGファイルを作成し、アップローダーでアップするだけで、オリジナルのWebフォントを作成できるサイトです。ありがたい。

Icon Font & SVG Icon Sets ❍ IcoMoon
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Bro...

SVGファイルを登録

右上のIcoMoonAppをクリックして画面移動します。

作成したsvgファイルをアップロードします。
今回アップしたのは4つの円を作成したものをアップロード。

アップロードしたら、ファイルを選択します。
クリックするとオレンジ色で選択されます。

右下のGenerate Fontを選択します。

画面が表示されて、右下のDownloadボタンからダウンロードできます。
ちなみに、アップロードしたファイルにマウスを当てると、Get Codeがでてきて、クリックするとHTMLやCSSをコピーできます。

HTML、CSSもコピーできて便利ですね。

ダウンロードしたファイル

zip解凍後のファイルです。
fontsフォルダ、style.css、htmlファイルで確認できました。

必要なファイルやフォルダは、fonts、style.cssとhtmlのコードでした。

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <link rel="stylesheet" href="style.css"></head>
<body>
<span class="icon-ashikitaico_circle"></span>
</body>
</html>

拡大してもいい感じです。

コメント

タイトルとURLをコピーしました