HOME サイトマップ 営業日カレンダー お問い合わせ

HOME サイトマップ 営業日カレンダー お問い合わせ


Fontisto（使える無料のwebサービス・ツール33）

株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム（バナー用3）
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

カスタマイズ可能なsvgアイコンフォント・Fontisto

Fontistoは、カスタマイズが可能なsvgアイコンフォントを無料で公開しているwebサービスです（商用利用も無料で可能です）。数多く存在する無料アイコンフォントサービスの中で他にもsvgを使ったものがありますが、Fontistoは、cssのclass指定だけで簡単にカスタマイズできる点が気に入っています。
→ Fontisto

Fontisto トップ画面

使い方

  • トップ画面（上の画像）の「DOWNLOAD」をクリックすると、Fontistoアイコンフォントのファイル一式がダウンロードできます。svgやpng画像、otfやttf、woffなどのfont、css、その他が含まれていますので、それらをそのまま、もしくは加工して利用します。
    webで利用する場合は、cssファイルを好きなディレクトリに設置し、htmlの<head>に、
    <link href="ファイルのディレクトリ/fontisto.min.css" rel="stylesheet">
    などと記述します。
  • または、htmlの<head>に、
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fontisto@v3.0.4/css/fontisto/fontisto.min.css"></i>
    と記述して、CDNで利用します。今回はこちらを利用します。
  • basicなアイコン
  • twitter　 pie-chart-1　 volume-up
    <i class="fi fi-twitter"></i> twitter　
<i class="fi fi-pie-chart-1"></i> pie-chart-1　
<i class="fi fi-volume-up"></i> volume-up
    上のようにclass名に「fi」と「fi」+「アイコン名」を付けることで、アイコンが表示されます。
    なお、アイコンのfont-size、colorは別途のcssで指定しています（以下同様）。
  • アイコンの回転
  • 　 　 　 　circle-o-notch
    <i class="fi fi-circle-o-notch"></i>　
<i class="fi fi-circle-o-notch fi-r-90"></i>　
<i class="fi fi-circle-o-notch fi-r-180"></i>　
<i class="fi fi-circle-o-notch fi-r-270"></i>　circle-o-notch
    上のようにclass名に「fi」、「fi」+「アイコン名」と「fi-r-」+ 角度 を付けることで、その角度分右回りに回転したアイコンが表示されます。この例では、視力検査の上下左右の記号のように見えます。
  • アニメーション回転するアイコン
  • circle-o-notch　 spinner-refresh　 spinner
    <i class="fi fi-circle-o-notch fi-spin"></i> circle-o-notch　
<i class="fi fi-spinner-refresh fi-spin"></i> spinner-refresh　
<i class="fi fi-spinner fi-spin"></i> spinner
    上のようにclass名に「fi」、「fi」+「アイコン名」と「fi-spin」を付けると、アイコンをアニメーション回転させることができるので、簡単にローディングスピナーが作れます。
  • 背景を囲み塗りつぶしたアイコン
  • player-settings　 power　 volume-up
    <i class="fi fi-player-settings fi-stack ellipse"></i> player-settings　
<i class="fi fi-power fi-stack ellipse curve"></i> power　
<i class="fi fi-volume-up fi-stack rectangle"></i> volume-up
    上のようにclass名に「fi」、「fi」+「アイコン名」と「fi-stack」、「ellipse」を付けると、背景を丸形で塗りつぶします。同様にして、「ellipse」を「curve」にすると、背景を角丸四角で塗りつぶします。同じく「ellipse」を「rectangle」にすると、正方形で塗りつぶします。アイコンの色はいずれも反転して白になります。
  • 背景をボーダーで囲んだアイコン
  • player-settings　 power　 volume-up
    <i class="fi fi-player-settings color19f fi-border ellipse"></i> player-settings　
<i class="fi fi-power colorc5e fi-border ellipse curve"></i> power　
<i class="fi fi-volume-up color75f fi-border rectangle"></i> volume-up
    「背景を囲み塗りつぶしたアイコン」と同じものを使い、class名のうち「fi-stack」を「fi-border」に変更すると、背景がそれぞれ丸形、角丸四角、正方形のボーダーになります。アイコンの色は反転しません。なお、ボーダーの色は別途cssで薄い色に変更しています（オリジナルは黒）。また、アイコンとボーダーの囲みの上下位置がずれる場合は、cssの「line-height」を使って調整が可能です。
  • checkbox、radioのアイコン
  • fi-list-circle　 fi-list-ellipse　 fi-list-rectangle　 fi-list-rectangle
    <i class="fi fi-checkbox-passive"></i> fi-list-circle　
<i class="fi fi-checkbox-active"></i> fi-list-ellipse　
<i class="fi fi-radio-btn-passive"></i> fi-list-rectangle　
<i class="fi fi-radio-btn-active"></i> fi-list-rectangle
    checkbox、radio用のアイコンも用意されています。ブラウザ独自のアピアランスを消すことで、このアイコンをcheckbox、radioに利用することができます。

    関連ページ ブラウザ独自のアピアランスを消したcheckbox、radioの一例