まずは、下記ページにアクセスし、登録をします。, メールアドレスを入力し「Send Kit Code」をクリックすると、メールが届くので、「Click to Confirm」をクリックして認証をします。, Font Awesomeを使用するためのコードが発行されるので、コピペして利用できます。アイコンを使用するHTMLに下記のコードをコピペして利用してください。, コードは自分のアカウントページからいつでも再発行・再生成でき、新しく作成することもできます。, Font Awesomeの基礎知識はこれだけです。Font Awesomeが提供する本当に便利な機能を紹介します。, なんと、Font Awesomeではclassで指定するだけで、アイコンのサイズも簡単に変更できます。サイズ用のCSSを記述したり、アイコンを修正する必要はありません!, アイコンをサイズ変更する.fa-#xは、2-10の値を利用できます。各classのフォントサイズは、下記の通りです。, リスト要素のビュレットをアイコンにするのも簡単です。 もし、font-awesome.cssと、fontsフォルダの位置関係(相対パス)が変わってしまう場合は、font-awesome.css内で調整して下さい。下記部分の、url()の中身の、相対パスの記述を変更して下さいね。この相対パスは、 font-awesome.cssが起点となります。 More styles. More icons. スタイルシートを使わないでfontawesomeのアイコンに色をつけたい!fontawesomeの色指定は記事内で完結したい!検索してもfontawesomeはCSSで色指定しよう!というものばかり。 もし、font-awesome.cssと、fontsフォルダの位置関係(相対パス)が変わってしまう場合は、font-awesome.css内で調整して下さい。下記部分の、url()の中身の、相対パスの記述を変更して下さいね。この相対パスは、 font-awesome.cssが起点となります。 全部同じアイコンにすることも、全部異なるアイコンにすることもできます。, アイコンを回転させたい時はありませんか? Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することが可能!ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込 このマークを当ブログでも表示されるようにしようと思いまして、いろいろ調べてやってみたので記録として記事にしておきます。 今回は、CSSと“Font Awesome”というフリーで使えるWebフォントを利用 … マークを変えたい。 ★1の「f35d」の部分を、変えたいマークの名前に変更します。 マークはここから探します。 Font Awesomeのウェブサイト. ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。, PROプランだとアイコン種類が多く、さらに複数の太さのアイコンを使うことができます。料金は$60です(1度の支払いで使い続けることができます。)。, FontAwesomeを使うために少しだけ準備をする必要があります。この準備には2つの方法があります。, CDNとはものすごくざっくりというと「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みです。つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるのです。, 個人的にはこの方法がオススメです。FontAwesomeに新しいアイコンが追加されたときにダウンロードし直す必要はありませんし、自分のサーバーへの負荷を減らすこともできます。何より楽なのが良いですね。ただし、新アイコンが追加されたときにはURLの中のv○.○.○の部分を最新のバージョン番号に書き換えないと新アイコンは使えません。, 上のコードはFontAwesome5を使う場合のコードです。旧Verを利用する場合は、下記のコードをコピーしてください。, WebフォントではなくSVG画像形式でアイコン表示することもできます。その場合には、以下のコードを貼り付けます(これだけで準備完了)。詳しくはこちらをどうぞ。, SVG+JavaScriptでアイコンを表示する場合にも、以下で説明する使い方手順は共通です。, コピーしたコードをブログやWebサイトの〜の中に貼り付けます。よく分からなければの直前に貼ればOKです。これでアイコンフォントの使用準備は完了です。, こちらは自分のサーバーにアイコンフォントのデータをアップロードして使う方法です。この記事では解説は省きますが、こちらの記事が参考になるかと思います。, アイコン一覧から使いたいアイコンを選びます。このページは何度も使うことになるかと思うのでブックマークしておくと良いでしょう。, 使いたいアイコンをクリックします。薄いグレイで表示されているアイコンは、PRO(有料)プランでのみ使うことができます。, アイコンの詳細ページが開きます。下にスクロールして、というコードをまるっとコピーします。, コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。, ただし、はてなブログの場合、HTML編集画面で貼り付けたときにコードが消えてしまうことがあります。詳しくはこちらの記事をご覧ください。, FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードをi class="〜"内に書くことでサイズを大きくすることができます。, 上の5つのサイズ以外にしたい場合は自分の好きな名前のclassを追加して、そのclassに対してCSSでサイズ指定しましょう。, アイコンの色を変えるときには、iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。たとえば以下のように書きます。, FontAwesomeではfa-fwという名前のclassをiタグに追加すると、前後にちょっとした余白が作られたりします。, このclassには「アイコン種類に関わらず、そのアイコンが取る幅を統一させる」という意味があります。つまり、アイコンの大きさに応じて左右にちょっとしたスペースを作ってくれるのです。, コレを「左右が詰まっているな」と感じたときに使うと、なかなかにちょうど良い隙間が出来たりします(アイコン種類にもよりますが)。, また、アイコンを縦に並べるときには、それぞれのiタグにfa-fwを入れると、綺麗に揃って並ぶようになります。, fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。, FontAwesomeでは他にも色々なアニメーションをつけることができます。詳しくはのちほど解説します。, ここまではHTMLの中にというコードを入れてきましたが、CSSでアイコンを表示させることもできます。具体的には疑似要素(before)を使います。, ・font-family: "Font Awesome 5 Free";でFontAwesomeを使うことを明示・content: '\f1e2'でアイコンの種類を指定というような書き方をします。バックスラッシュをお忘れなく。, アイコン種類を示すf1e2のようなコードは各アイコンのページで見ることができます。これをコピペして使いましょう。, FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。, やなどのブランド系のアイコンを使うときは、font-family名を"Font Awesome 5 Brands"とします。, なお、旧バージョンのFontAwesome(4.7.◯以前)をお使いの場合には、font-family: FontAwesome;とします。FreeやBrandsなどは書きません。, でアイコンを読み込んで表示させている場合、上記のCSS指定に加えて、もう一手間必要です。, こちらのscriptをhead内に追加することで、疑似要素をSVGに変換してくれるようになります。, 「JavaScript + SVG」での利用の場合には、font-familyとcontentの指定に加えて、display: none;も疑似要素に対して指定するようにしましょう。, {padding-right}はアイコンと文字との隙間になるので、必要に応じて値を調整しましょう。また、この設定だと文字とアイコンは同サイズになります。アイコンを大きくしたり小さくしたりしたいときはfont-sizeで変更しましょう。なお、上の書き方例ではh3としていますが、h1でもh2でも書き方は全く同じです。, なお、アイコンを使った見出しデザイン例はこちらの記事で大量に紹介しています。ぜひ参考にして頂ければと思います。, 一部のアイコンではfont-weight:●●を指定してやらないと表示されないことがあるようです。詳しくは「FontAwesome5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処法」が参考になります。うまくいかない場合には、一度チェックしてみてください。, リストデザインにアイコンフォントを使うこともできます。具体的なデザイン例をこちらで解説しているので、是非目を通してみてください。, 『Font Awesome Animation』という専用のスタイルシートを読み込めば、アイコンにより多くの動きをつけることができるようになります。, CDNによりFontAwesomeを読み込んでいる場合、以下のコードをheadタグにさらに追加します。これでたくさんのアニメーション効果が使えるようになります。, たとえば、faa-wrench animatedというclassを追加すれば、前後に揺れるような動きをつけることができます。アイコンはどれを選んでも構いません。, 合わせてアイコンの色を変えたり、大きさを変えることもできます(さきほど紹介した方法と同じです)。, ここから「Font Awesome Animation」により表現できる動きをまとめました。, class名のanimatedをanimated-hoverに書き換えると、アイコンにカーソルをのせたとき(hover時)のみアニメーションが有効になります。, 親要素にカーソルをのせたときのみ動くようにすることもできます。たとえば、pタグの中にアイコンがある場合、pタグにカーソルをのせたときにアニメーションが有効になります。, シェアボタンを作るときなんかに便利そうですね。くわしくはFont Awesome Animationをご覧いただくと良いかと思います。. 今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。, ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。, ※上のリンクは2017年末にリリースされたFontAwesome5です。旧バージョンを利用することもできます。, ウェブページ上で文字と同じように表示できるアイコンのことです。画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。, たとえばこれらのアイコンはFontAwesomeを使って表示しています。このように色もサイズも自由に変えることができます。, 2017年末にリリースされたFontAwesomeの最新バージョンです。FontAwesome5には、無料プランと、有料のPROプランがあります。 Font Awesome. 親要素に.fa-stackを加え、重ねたいアイコンを通常通りに配置するだけです。, スケーリングは親要素に影響を与えることなく、アイコンのサイズを変更します。アイコンを拡大・縮小するには.grow-#, .shrink-#を使用し、小数を含む任意の値を定義できます。, 配置は親要素に影響を与えることなく、アイコンの位置を調整できます。アイコンを上下左右に移動させるには、.up-#, .down-#, .left-#, .right-#を使用し、小数を含む任意の値を定義できます。 The world’s most popular and easiest to use icon set just got an upgrade. Font Awesome guide and useful tricks you might not know about. ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。, Font Awesomeは多くの人が知っており、毎日使っている人もいると思います。, 知らない人のために簡単に説明すると、Font AwesomeはWebサイトやスマホアプリ用の素晴らしいアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できます。, ここで紹介するアイコンはSVGですが、心配しないでください。SVGについての知識は必要ありません。それでは、始めましょう!, SolidとBrandsのほとんどのアイコンは無料で利用できますが、他の3つのスタイルはプロ版(有料)です。, Font Awesome アイコンを使用するには、登録(無料)が必要です。 または、以下のリンクからダイレクトにURLを開いてください。 Icons; Cheatsheet; 使い方を覚えてしまえば、マークを差し替えればいろいろと使えます。 「fontawesome」からアイコンを選ぶ . のトップページから「icons」のメニューを開くと利用できるアイコンの一覧を見ることができます。. Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful tricks you might not know about. by Kiss Patrik, 下記は各ポイントを意訳・加筆したものです。 Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。, Font Awesome guide and useful tricks you might not know about. More Options. スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか, 便利なツールが登場!ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール, これなら簡単!SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont, ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers, 画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法, 【朗報】Adobe公式からPhotoshopとFresco向けに、キース・ヘリングのタッチを再現した無料ブラシがリリース, 商用利用無料、UIデザイン用のSVGアイコンが1100種類!Adobe XDやFigmaのツールも完備されてて、これは便利, 有料フォントとラインアート素材が今週末まで無料!期間中に一度ダウンロードしておけば、再ダウンロードも無料, テキストやSVGや画像が3Dで動く!HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js, 映画とタイポグラフィが大好物な人に、珠玉のデザイン書 -SF映画のタイポグラフィとデザイン, 2020年用、日本語のフリーフォント423種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記, 国内限定、商用利用無料のフリー素材の総まとめ -日本語フォント、写真素材、イラスト素材、マンガ素材など, フォント名が分からない日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ, 背景素材に困った時に!ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ, ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法, CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ, Photoshop 2020の新機能がかなり便利!かゆいところに手が届く改善点が盛りだくさん, Photoshopの選択範囲や切り抜きはこれが一番簡単で正確!CC 2015.5で進化した選択範囲とマスクの作成, UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介, 最近のロゴのデザインに使われている、注目しておきたいデザイントレンドのまとめ -Logo Design Trends 2020, 総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト, プロカメラマン仕様のPhotoshopのトーンカーブのまとめ -写真画像の自然光とカラーを美しく印象的に仕上げる, 写真がもっと楽しくなる!写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ, 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ, 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと. Font AwesomeではCSSのtransformプロパティを使用せずに、アイコンを回転・反転させることもできます。そうです、classを加えるだけです!, 回転する角度は.fa-rotate-#、水平・垂直の反転は.fa-flip-#で指定します。, Font Awesomeのアイコンはclassを加えるだけで、スピン(.fa-spin)やパルス(.fa-pulse)などのアニメーションをアイコンに与えることもできます。, Font Awesomeのアイコンは重ねて使用することもできます。 FontAwesomeでは fa-fw という名前のclassをiタグに追加すると、前後にちょっとした余白が作られたりします。 青文字「クリックするとコピーされる」の所に書いてあるのが、マークの名前です。 アフィンガーで表示させるアイコンは、「fontawesome」というサイトのアイコンを使用できます。 600種類以上あり、使えるアイコンも増え続けています。 CSSの絶対配置のような感じですね。, この機能は「アイコンを重ねる」と同様に、2つのアイコンを1つにまとめることができます。, classには上記の例に従って、内側のアイコンは.fasと.fa-pencil-altです。data-fa-mask属性には外側のアイコンのclassを指定します。この場合は、.fasと.fa-commentです。, アイコンを.fa-layersのspan要素で内包し、テキストは.fa-layers-textのspan要素で内包します。, アイコンに数字のカウンターを追加することもできます。例えば、受信したメッセージの数を封筒アイコンに表示させたい時などです。, アイコンの上にテキストを配置とほぼ同じで、.fa-layers-textの代わりに.fa-layers-counterを使用します。, カウンターはデフォルトで右上隅に配置されますが、他の場所に配置することもできます。.fa-layers-bottom-left, .fa-layers-bottom-right, .fa-layers-top-left、およびデフォルトの.fa-layers-top-rightで配置でき、オーバーフローテキストは省略記号で切り捨てられます。, "https://kit.fontawesome.com/[任意の文字列で生成].js". © Copyright 2020 サルワカ All rights reserved. FontAwesomeのファイルの設定方法とCSSの読み込み方法が丁寧に解説されています。, ここまでFontAwesomeの使い方を解説してきました。他にアイコンフォントの面白い表現を見つけたら追記していきます。, , FontAwesome5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処法, 親要素に「faa-parent animated-hover」というclass名を追加, アイコンには「faa-◯◯」というclass名だけ追加(「animated」はつけない).

.

既婚者 惚れ させる 14, 北大 Hines 接続 23, Trainer Fm 2020 9, ドラクエ10 ま もの 使い サポ エモノ呼び 4, 生理前 お腹 妊婦みたい 27, 教える 時に 怒る人 5, 平成28年度 全国中学生 長身選手発掘育成合宿 5, 水商売 賃貸 横浜 5, モンスター ウルトラ 太る 19, 福岡 すず インスタ 9, コンフィデンス マン 動画サイト 4, 日産 充電 パスワード廃止 7, 聖 路 加 国際大学 併願 5, Vbs 構造体 配列 5, ユリマリ ユリ 現在 12, 犬 鼻水 ピンク 5, Hp All In One 24 8, Http Www Tohmatsu Co Jp Sqa Baum 10, 鷗 合唱 歌詞 解釈 5, B'z Home Mp3 7, Asus Bios 起動優先順位 8, パワプロ2014 攻略 栄冠ナイン 7, Led ノイズ オーディオ 11, オモコロ 原宿 結婚 30, 歯科 受付 職務経歴書 5, Ntsc Hdmi コンバータ 4,