2018年5月30日

デザイン

CSSでカスタマイズできるSVGアイコン集 Fontisto

目次

  1. はじめに
  2. Fontistoとは
  3. 使えるアイコン
  4. セットアップ
  5. 使い方
  6. まとめ

はじめに

今日はCSSでカスタマイズできるSVGアイコン集 Fontistoをご紹介します!

この記事ではFontistoで使えるアイコンや、Fontistoがどのような技術で作られているのか、またセットアップやカスタマイズの方法などもご紹介します。

ベーグリーでは他にも最新の便利なSketchのプラグインをご紹介しています。
ぜひご覧ください!
【Sketch】Sketch50アップデートの変更点まとめ

Fontistoとは

アイコンといえばFontAwesomeですが、その有名さゆえ、いろんなデザイナーがFontAwesomeを使っています。

自分で0からアイコンセットを作りたくないけど、FontAwesomeよりはもう少し凝ったものやデザインが違うものを使いたいな、と思っている方のために、今回はFontistoというアイコン集をご紹介します!

Fontistoとは無料で使えるSVGのアイコン集です。

現在では616以上もの無料アイコンが使えます。

FontAwesomeの無料プランだと使えるアイコンが1,109個なので、比べると若干少ないですが、Fontistoのアイコンの種類はシンプルなアイコンからソーシャルメディアのアイコン、有名なブランドのアイコンなど幅広いので非常に使いやすいアイコンが揃っています。

Fontistoはレスポンシブ対応もしており、JavaScriptも使用していないので非常に軽いです。
また、個人利用、商用利用ともに無料で使えます。

最近では、Chrome, Firefox, Operaのブラウザエクステンションもできたようです。

FontistoのGithubリポジトリはこちらです。
fontisto

そのほかの公式アカウント:
Behance: fontisto
ツイッター: fontisto

使えるアイコン

現在、Fontistoでは以下のカテゴリのアイコンがあります。

  • Brand ( 162 )
  • Social ( 18 )
  • Browser ( 6 )
  • Accessibility ( 9 )
  • Chart ( 5 )
  • Currency ( 11 )
  • Arrows ( 28 )
  • FormControl ( 4 )
  • Gender ( 14 )
  • Hand ( 2 )
  • Payment ( 14 )
  • Player ( 24 )
  • Spinner ( 10 )
  • Transportation ( 16 )
  • Travel ( 30 )
  • Interfaces ( 121 )
  • Editors ( 39 )
  • Weather ( 30 )
  • Emoji ( 20 )
  • Medical ( 31 )
  • Snowflake ( 9 )
  • Shopping ( 10 )

全てのアイコンはこちらのFontisto公式アイコンセット紹介から見ていただけますが、bageleeではその一部をご紹介します。

Brand

AppleやSpotifyなどの有名どころのSVGアイコンはもちろん、atom, babelなどの技術系のアイコンもあります。

Social

Arrow

Spinner

Interface

今回ご紹介したいのはほんの一部ですが、全てカスタマイズできるようになっています。

カスタマイズ

ボーダー:

丸ボーダー:

カーブボーダー:

長方形ボーダー:

背景

丸背景:

カーブ背景:

長方形背景:

他にもちょっとしたアニメーションをつけたり回転をさせたりすることができます。
カスタマイズは下にあるナビから設定することができます。

またそれでも目当てのアイコンがなければfontistoのGithubリポジトリのIssueにあげると良いでしょう。

すでにいくつか上がっているので、参考にしながらイシューを作ると良いと思います。

セットアップ

次に、実際にfontistoを使う際のセットアップの仕方をご紹介します。

いくつか方法があるのでお好きなやり方を選んでください。

CDNで読み込む

CDNで読み込む場合は、こちらを使います。

<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/fontisto@v3.0.4/css/fontisto/fontisto.min.css”></i>

</i>なしでも動きましたが、公式サイトではついているのでつけておきます。

ダウンロードする場合

  1. 最新のfontistoをダウンロードする。

  2. HTMLの<head>の中に fontisto.min.css のパスを記述する

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- fontisto css -->
        <link href="fontisto/css/fontisto.min.css" rel="stylesheet">
    </head>
    <body>
        <i class="fi fi-facebook"><i>
        <i class="fi fi-twitter"><i>
        <i class="fi fi-instagram"><i>
    </body>
</html>

CSSプリプロセッサを使用する

  1. 使用しているプリプロセッサに合わせた最新のfontistoをダウンロードする。
    SASS
    LESS
    STYLUS

  2. プロジェクトの variables$fi-font-path variable にプロジェクトのフォントディレクトリを記述する

  3. Sassを使っている場合は、リコンパイルをする。

package managerを使う

Npm:
npm install fontisto
Npm公式

Yarn:
yarn add fontisto

Yarn公式

他にもbower, composer, meteor, github packageが使えるので、ご興味がある方はこちらよりどうぞ。
fontisto | get started

使い方

最後に簡単に使い方をご紹介します。

See the Pen fontisto by Ayaka Sasaki (@ayausaspirit) on CodePen.

このようにfont awesomeと同じ要領でiタグのクラスに使いたいアイコンのクラスを入力します。

See the Pen fontisto by Ayaka Sasaki (@ayausaspirit) on CodePen.

こんな感じで fi-spin クラスでアイコンに回転をつけることができます。 fi-spinner に関しては fi-spin より fi-pluseの方が良いのでそちらで対応してください。

See the Pen fontisto by Ayaka Sasaki (@ayausaspirit) on CodePen.

また、CSSでもこのように色やサイズをカスタマイズできます。

まとめ

以上、今日はCSSでカスタマイズできるSVGアイコン集 Fontistoをご紹介しました。

ぜひ皆さんのWeb制作に役立ててみてください!

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP