Webサイト制作

投稿日:2017年7月18日 更新日:

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。

他のアイコンはpng形式の画像だったけど全然違う。
通常、画像でできたアイコンは画面サイズによって拡大縮小したりするとぼやけたりしてしまう。
でもアイコンフォントはぼやけないしキレイ!

fontawesomeを読み込んで使うのも気軽にできるのでおすすめだけど、 もっとおすすめなのがこのサイト。
http://fontello.com/

使いたいアイコンだけ選んで使うことができるからファイル容量が無駄に大きくならない。
さらに自分で作ったSVG画像を追加することもできる。

「あ~~、こんなやつあったらな~」ってのがなくなりますよ。
http://fontello.com/

画像をアイコンフォントにする方法

できるだけ単純化された正方形の画像を作成し、
SVG形式で保存したファイルをcustom Iconsの欄にドラッグするだけでOK。

使いたいアイコンを選んだら
フォントをダウンロード

読み込んでるフォントファイルとcssファイルを上書きしてアップすれば完成~~

便利だ~~

- Webサイト制作

関連記事

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...