Awesome」の使い方Webサイトを見やすく、分かりやすくするアイコン。上手く使うことでユーザーの満足度を高めることができますが、フリーのアイコンを探したり、画像編集ソフトで一からアイコンを作成するのは手間と時間がかかります。そんな時に便利なのが、Webアイコンフォントです。これを使うことで、高品質のアイコンを簡単に設置することができます。Awesome」を紹介したいと思います。アイコンを重ねるWebアイコンフォントとは使い方を紹介する前に、Webアイコンフォントについて簡単に解説します。Webアイコンフォントとは、アイコンをWebフォントとして使えるようにしたものです。ここで、「Webフォントって何?」と思う方もいるでしょう。Webフォントとは、CSS3のフォント機能を使って、Webサーバ上にあるフォントを表示する技術です。Webフォントを使えば、パソコンでも、スマートフォンでも、同じデザインのフォントが表示されます。Webアイコンフォントのメリットサイズや色などを簡単に変更できる画像編集ソフトを立ちあげなくても、CSSで色やサイズを変更できます。拡大しても綺麗に表示されるGIF、PNG、JPEGなどの画像データと違い、拡大しても綺麗に表示されます。Awesome」の設置方法から使い方までを説明していきます。今回はCDNを利用します。headタグ内に下記のコードを記述してください。rel="stylesheet">準備はこれだけです。続いては、使い方を見ていきましょう。好きなアイコンを選んでコピー、好きな場所に貼り付けをするだけです。Awesomeのサイトに移動します。上部メニューのIconsをクリックして、アイコン一覧ページに移動します。Awesomeのアイコン一覧ページへはこちらをクリック』してください。使いたいアイコンを選んでクリックします。HTMLタグをコピーします。あなたのWebサイトの好きな場所に貼り付けます。Awesomeは、HTMLタグに少し追加することで簡単にデザインを変更できます。アイコンのサイズを大きくするclassにfa-lg、fa-2x、fa-3x、fa-4x、fa-5xを追加することで、大きさを変更できます。fa-5x"></i>(fa-lg)(fa-2x)(fa-3x)(fa-4x)(fa-5x)アイコンを線で囲うclassにfa-borderを追加することで、アイコンが線で囲われます。fa-border"></i>アイコンに回転アニメーションの効果をつけるclassにfa-spainを追加することで、アイコンが回転します。fa-spin"></i>アイコンに角度をつける、反転させるclassにfa-rotate-xを追加することで、アイコンの角度を変更、fa-flip-horizontalを追加することで反転できます。(xには、角度が入ります。fa-rotate-90で90度、fa-rotate-180で180度といった具合です。fa-flip-horizontal"></i>(fa-rotate-90)(fa-rotate-180)(fa-rotate-270)(fa-flip-horizontal)アイコンを重ねる2つのアイコンを簡単に重ねることもできます。親要素にfa-stackを指定、アイコンのclassに、fa-stack-1x(通常サイズ)、fa-stack-2x(倍サイズ)を追加します。fa-stack-1x"></i></span></p>スポンサードリンクWeb制作Webフォントアイコンこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。RECOMMENDこちらの記事も人気です。2018.9.18【iOS12】iPhoneのARメジャーアプリ「計測」の使い方・カメラ...ABOUTこの記事をかいた人タクヤサラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。