>Web・IT画像アイコンは古い?CSSで作られたアイコンなら綺麗で簡単設置>画像アイコンは古い?CSSで作られたアイコンなら綺麗で簡単設置TwitterFacebookはてブPocket執筆者:竹中文人[最終更新日]2018/01/19[カテゴリ]Web・ITWebサイトに下図のような“アイコン”を使用する際、あなたは画像を利用しているでしょうか?一般的に画像アイコンを使用するケースが多いと思いますが、画像の場合は輪郭がくっきりと表示されなかったりと、綺麗に表示されない場合があります。スマートフォン等で表示がぼやけてしまうということがあり、綺麗に表示させたいという方にとって悩みの種です。綺麗にアイコンを表示させたいのであれば、CSSだけで作られたアイコンを使用してみてはいかがでしょうか?上のアイコン4つは、全てCSSだけで作られたアイコンです!とてもCSSだけで作られたとは思えないような複雑なアイコンも存在します。表示させる方法はとても簡単です。Awesome』というサイトで提供されており、現時点でなんと439種類ものCSSアイコンが無料で利用できます。>http://fortawesome.github.io/Font-Awesome/icons/設置するのに最も簡単な方法を紹介致します。下記のコードをheadタグ内に入れてください。Awesome』から設置したいアイコンをクリックすると、設置するためのコードが記入されたページが表示されます。<i>タグ部分をコピーして、アイコンを表示させたい場所に貼り付けましょう!これだけでアイコンが表示されます。大きさを変更するアイコンは大きさや角度などをカスタマイズすることも可能です。大きさを変更するには、先ほどの<i>タグ内のclass属性に次のコードを追加します。fa-5x(表示例)fa-lgfa-2xfa-3xfa-4xfa-5x角度を変更する角度を変更するには次のようにします。icon-flip-vertical(表示例)normal(通常)fa-rotate-90(90度回転)fa-rotate-180(180度回転)fa-rotate-270(270度回転)fa-flip-horizontal(水平方向に反転)icon-flip-vertical(垂直方向に反転)※その他のカスタマイズ方法はこちらのページに載っています。Awesome』だけではありません。各サイトで挿入するタグが多少異なりますが、基本は指定されたタグを挿入するだけで表示されます。好みのアイコンを見つけて利用してみましょう。