Webサイト制作

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

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

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

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

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

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

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

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

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

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

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

便利だ~~

- Webサイト制作

関連記事

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...

no image

サイト制作に役立つTips_リンク集

目次1 スタイルなどの装飾1.1 ボタンのホバーアニメ1.2 角丸とシャドウのジェネレーター1.3 グラデーションジェネレーター1.4 CSS三角形作成ツール1.5 吹き出し作成のジェネレーター1.6 ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 目次1 まずはhtml2 つぎにcss3 cssの中身の解説4 高さ ...

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

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

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...