有名だし前からあるので知っている方も多いかもしれません。Bootstrap簡単に使えて、フォントの数も369(バージョン4.0.3)と非常に多いです。使い方は以下のページで親切に説明されていますが、英語なので簡単に説明します。Awesomeまず、以下のコードでWebフォントの呼び出します。後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。この基本形にクラスを追加すると色々とカスタマイズすることができます。ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。"\f0e8";}一般的なアイコンタイプのWebフォントの指定方法で、擬似要素を使って表示しています。大きさを変えるクラスを追加することで大きさを変えることができます。fa-5x(5倍)の5パターンあります。CSSのフォントサイズで大きさを変えても大丈夫です。リストに使うリストに使う場合は「fa-fw」を追加すると、文字が始まる位置がきれいにそろいます。なし】HomeLibraryApplicationsSettings一番下の「Settings」の位置がそろっていません。あり】HomeLibraryApplicationsSettingsこれだときれいにそろっています。微妙かもしれませんが、こういうところはしっかりしておきたいものです。この他にも、ul要素に「fa-ul」アイコンに「fa-li」を付けると簡単にリストメニューが作れます。ボーダーと回りこみ「fa-border」でアイコンの周りにボーダーを付けることができます。pull-leftで左側に、pull-rightで右側に回りこみます。通常は以下のように次の要素は下に表示されます。猫は今夜進みてしまいじ。大は二あける子のようを済ましていまし。沓はゴーシュかっこうたりそれへきれてくれまし。お父さんは療にまたに過ぎて工合を窓のようにして音楽から出ながらじつに金が結んといです。「pull-left」を追加すると、アイコンに続く要素が右へ回りこみます。猫は今夜進みてしまいじ。大は二あける子のようを済ましていまし。沓はゴーシュかっこうたりそれへきれてくれまし。お父さんは療にまたに過ぎて工合を窓のようにして音楽から出ながらじつに金が結んといです。常時回転させる「fa-spin」を追加すると、ローディングのアイコンのように常時回転させることもできます。CSS3のanimationを使っていますので、IE9以下は対応していません。ちなみにスタイルはこんな感じです。}}実際はこれにベンダープレフィックスが付いています。回転やひっくり返して表示させる「fa-rotate-90」「fa-rotate-180」「fa-rotate-270」でそれぞれの角度を回転させて表示することができます。「fa-flip-horizontal」で左右、「fa-flip-vertical」で上下ひっくり返して表示することができます。重ねて表示することで表現の幅は広がります。HTMLは以下のようになります。span要素の中に重ねる2つのアイコンを置きます。今回の場合は外のサークルの大きさを2倍にしています。「fa-inverse」を指定すると色を反転させることもできます。CSSはこんな感じです。Awesome」の使い方を説明しました。前からあるようなので、知っている方も多いと思いますが、お役に立てたなら幸いです。ウェブサイト作成に役立つことをいろいろと@webpark2さんのツイートこの記事に付いているタグの最新記事一覧loading...コメントNAME:URL:COMMENT:PASS:※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。EntryCSS(スタイルシート)の基本、小技、テクニック総まとめ意外と知らない!?CSSセレクタ20個のおさらい保存版!CSS3セレクタの説明書CSS3を使うにあたって知っておきたいIE対策のまとめCSSの擬似要素を使った見出しデザイン擬似要素とCSS3を使ってリストメニューを楽しくデザインオンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つjQueryとCSS3を使ったアコーディオンメニューを詳しく説明しますCSSだけで作る動きのあるドロップダウンメニューjQueryを使った一定以上スクロールすると上に固定される横メニューCSS3について知っておきたいことのまとめ配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!TweetWebparkについて和歌山に住むごく普通のサラリーマンです。趣味でウェブサイト作成に関することをいろいろと勉強しています。役立ちそうな内容をまとめてブログに載せています。