Webサイト制作

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

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

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

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

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

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

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

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

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

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

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

便利だ~~

- Webサイト制作

関連記事

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 目次 ...

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

no image

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

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