オンズ茨城県つくば市を拠点に、ホームページ制作・デザイン制作を行っています。直感で「...!!」や「...??」と感じたら、今すぐオンズにご相談ください。Googleこのアイコン使いたい!合計1,001種類のデザインが揃ったアイコンフォント[Linearicons]が可愛くて素敵です。v1.0.0]も同時にリリースされていますね。v1.0.0全アイコンのプレビューはコチラのリンク先からご覧いただけます。データ形式はウェブフォント(アイコンフォント)用のファイル一式と、PDF版、SVG版の3種類が梱包されています。v1.0.0」を実際にダウンロードして、アイコンフォントとして利用する方法を紹介します。Version」より、データファイルをダウンロードします。Now」をクリックするとスグにダウンロードがはじまります。Font」というディレクトリの中に、さらに「fonts」というフォルダが入っています。中には「Linearicons-Free.eot」や「Linearicons-Free.woff」など、それぞれの拡張子が付いたフォントファイル一式が梱包されているはずです。この「fonts」というフォルダごとサーバーにアップロードしましょう。Font」フォルダの中に含まれている「style.css」をコピーして使えばOKです。「style.css」の先頭には以下のようなコードが記述されていますので、各フォントファイルへのリンクが正しいかどうか、階層を確認してください。normal;}この「style.css」をHTMLファイルから読み込みます。href="style.css"&gt;ここまでで【Linearicons】を使う準備は整いました。あとはHTML側で、アイコンを表示させたい要素に定められたクラス名を付与していくだけです。いうクラス名を付与します。「xxx」の箇所をそれぞれ任意の文字列に書き換えます。一例を挙げると以下のようになります。lnr-link"&gt;&lt;/span&gt;各アイコンがどのクラス名と紐づけられているかは、公式サイトのチートシートか、またはダウンロードしたフォルダ内にデモ用の「demo.html」が用意されているので参照してください。ダウンロードは以下より。無料版が提供されているので、まずはお試しで使ってはいかがでしょうか。v1.0.0こちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS3】電光掲示板を再現するテクニック。【CSS】2行目以降を1文字下げる[text-indent]の使い方。