いつのまにか「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」のような準備されたサービスを活用してどんどんコンテンツを量産していきましょう。

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

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

良い構成のCVエリアのアイデアをいろいろと考察してみる

2017.12.24

動画ランディングページ(LP)の事例からAfter Effectsで可能な表現

2018.01.21

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11

【新企画】Webデザインとフォトショップのクイズをはじめます!

2019.01.05


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

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



スポンサード広告 by google