WEBシステム開発・デザイン制作などすべての作業を一貫してご提供しております。(大阪・東京近辺)

システム開発者の為のWEBデザイン CSS3アイコン「Font Awesome」

スマートフォン端末やタブレット端末からのアクセスが日々増えている今の時代では!(スマートフォンはCSS3対応)

システム開発者だから、デザインセンスが無い試作ページ、管理画面を作ってしまい、機能要件を満たしていても企画がボツになったと言う話もまったく無いことは無いのだ。

今ではそんな悲しい話も遠い昔となったようだ。さあ、システム開発者達よ制作現場の主役になろうでは無いか!


今日現在、アイコン、フォント、ビジネスで利用できる写真など無料で利用できる素材が反乱している。

そして一昔前に比べて、堂々とビジネス用途に利用できるほどのクオリティーが備わっているのだ。

もう時代は中途半端に作るより、それらの素材をうまく利用する時代になっているのかもしれない。

デザイナーがHTML制作だけでは無くJavascript開発やらCSS開発までスキルの幅を広げている中

システム開発のエンジニアもデザインセンスが問われるようになっている!

一からデザイン素材を作るのではなく、システム・サービスにあったハイクオリティーの素材を見つけて

利用するスキルを手に入れるんだ!


第三弾!CSS3アイコン「ont Awesome」

fortawesome.github.io/Font-Awesome/

CSSファイルへリンク アイコン数:519個~

設置方法として、Font Awesomeはとても簡単だ。

CDN(MaxCDN)として公開されているので、HTML内へ下記のタグを追加するだけで519個のアイコンが利用できる。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

フォントアイコンになっているので、アイコンのサイズ変更や色の設定が柔軟に行えるのも良い。

アイコンが若干重複している感じもするがそれはご愛嬌でいこう。数が多すぎて結局利用するのは決まってくるのかもしれないからだ。


サイト上のアイコンリストから気に入ったアイコンを見つけて、クリックするとアイコンを表示する為のタグが表示される。

それをそのままHTMLに貼り付けるだけで、アイコンを設置した近くのテキストにマッチした状態で表示される。

fortawesome.github.io/Font-Awesome/icons/

<i class="fa fa-file"></i>

アイコンのサイズやアニメーションなどが予めCSSに用意されているので、classに追加するだけでアイコンをカスタマイズすることが可能だ。

Bootstrapとの相性も良さそうなので、システム開発者におすすめなCSS3アイコン素材となっている。