いつのまにか「Font Awesome」が新しくなってたので調べてみた




ランディングページ(LP)のデザインでフォームを導入しようと考えて「Font Awesome」にアクセスしてみたらページが新しくなってましたね。

サンプルコード付き。前回の記事の「Font Awesome」を使ってアンケートフォームをより見やすくしてみよう!

Font Awesome」はざっくり言うと、CSSでピクトグラム化したアイコンを読み込むサービスで、
フォーム部分のデザインでも難しいコードを書き込まずにカスタムできます。

なので、ランディングページ(LP)のデザインばかり制作している私にとってはとても重宝しているサービスです。
最近だと、アンケートフォーム型の広告をデザインするときに手早く用意できるし使い回せるので便利かと思っています。

では、「Font Awesome」を確認していきましょう。

無料で十分?「Font Awesome」は使いやすくなった?

基本的にはウェブアイコンの使い方は変わっていません。
旧バージョンも新バージョンもプロバージョンが存在していて60ドル程度支払えばライセンス付与され豊富なアイコンが使用できます。しかし、フォームタグのような使い回しがしやすいデザインなら無料で十分なのかなと思います。

さっそくCDNのURLを貼付けます

BootstarapCDN
link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”

前回同様でホスティングコードです。ここからいつでも最新のWebフォントが手に入ると考えていただければ良いと思います。尚、旧バージョンも使えるので時間がない場合は旧バージョンで進めましょう。

新しいフォントリストからアイコンをピックアップ

メニューの「icons」から一覧ページへ遷移します。必要なアイコンは検索してみましょう。
今回は「cheack」からアイコンを探します。

見つかったアイコンをクリックすると、コーディングに必要な詳細が確認できます。

コードを貼付ければアイコン表示が可能です。
Font Awesome」は専用のクラス名を使ってアイコンの大きさや色を変えたり、回転させたりできます。
このあたりの調整はお好みで試してみてください。

さいごに

サンプルコード付き。前回の記事の「Font Awesome」も使ってアンケートフォームをより見やすくしてみよう!

ランディングページ(LP)の広告デザインはスピード勝負です。
フォームデザインを一からこだわって制作するより「Font Awesome」のような準備されたサービスを活用してどんどんコンテンツを量産していきましょう。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

前編【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?

2018.10.21

【第3回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.30

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

【年齢層別・乾燥肌】化粧品・コスメのランディングページ(LP)デザイン5選

2018.09.29

【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた

2018.10.07

【第2回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.23

前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!

2018.11.03


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google