Webサイト制作

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

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

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

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

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

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

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

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

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

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

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

便利だ~~

- Webサイト制作

関連記事

no image

Video要素の縦横比を変更する

目次1 やりたいこと2 原因3 対策3.1 対策13.2 対策23.3 問題点 やりたいこと Videoファイルが横長で見にくいので縦幅を調整したい 原因 Video要素のobject-fitがデフォ ...

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

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

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

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

no image

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

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

Atomエディタが便利です

目次1 今まで使っていたのはDreamWeaver2 おすすめのパッケージ2.1 メニューを日本語化[japanese-menu]2.2 タグが簡単に書ける[emmet]2.3 FTP接続するなら[r ...