コピペだけでかわいいアイコンが簡単に使える、アイコンフォントを使ってみよう。提携パートナー連絡フォームその他その他のお問い合わせホームページ運営ブログBlogホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。大阪のホームページ制作YCOMトップホームページ運営ブログコピペだけでかわいいアイコンが簡単に使える、アイコンフォントを使ってみよう。代表WEBフォントを使えば画像を使わなくても簡単にアイコンが使えます。これはどちらも画像じゃなくてフォントです。フォントだからこんなこともできます。画像を切り取って保存して参照させて使うって結構手間ですよね。画像を使わなくてもいいアイコンフォントをうまく使えば、ホームページの開発速度がぐっと上がりますよ。このアイコンフォントどうやって使うのか紹介します。アイコンフォントの仕組みそもそもの話、フォントってどうやって表示されているか知ってますか?フォントのもとはただの数字です、コンピューターは文字コードっていうものを使って表示させる文字をしています。「あ」という文字は、Unicodeでは16進表記で「304002」です。この数字は何で決まるかっていうと、文字コードのセットごとに数字と文字が割り当てられてるんです。こんな風に「304002」だと、それに対応する文字が画面上に表示されるっていうわけ。日本語の中にもUTF-8とかShiftJISとかいくつかのセットが存在します。文字化けっていうのはこれが原因で起こるもので、データ的には間違ってないけれど文字コードが違うからよくわからない文字列で表示されちゃうわけ。ブラウザではそんな時のためにエンコードを手動で指定できるようになってたりします。そのセットを変えてやれば別に文字じゃなくてもいいってことです。アイコンフォントはそれを利用して、テキストをアイコンとして表示させるものです。Awesomeを使ってみます。アイコンフォントは他にもたくさんあるので、興味がある人は以前のこちらの記事を読んでください。Awesomeというのを使ってみます。初め少し手順がいるけれど、一度導入すればむちゃくちゃ便利になります。Started”というところがあるのでここをクリック。表示されたページでE-mailを登録してください。するとこんなメールが来ます。使いたいアイコンをクリックすると、アイコンの詳細画面になる。自分のHTMLコードの好きなところに貼ってみる。それだけ!ブラウザで表示してみよう、こんな感じでアイコンが表示されたでしょ。こんな風にイラストをわざわざ用意しなくても、簡単なアイコンはコピペで簡単に使える。アイコンフォントのメリットアイコンフォントにはたくさんのメリットがあります。モバイル対応やレスポンシブデザインにとって欠かせないもの。思いつく限り書いてみる。手軽に使える一番のメリットはこれ。用意されている数々のアイコンから好きなものを選ぶだけ。タグを貼り付けるだけで手軽に簡単にアイコンが使える。これだけでかなり開発スピードが速くなる。気に入らなければその時に好きな画像に変えたらいい。軽いアイコンフォントはフォントと同じくベクターデータ、つまりラインのデータであり画像とは違います。このアウトラインのデータはラインの形状を表しているだけで、全てをピクセルで表現している画像に比べて非常に軽い。スマートフォンなどのモバイルデバイスでもサクサクと表示できます。拡大縮小してもキレイ!画像は画素データなので拡大すると画素がそのまま拡大されて粗くなるよね。フォントはアウトラインの形をデータにしたものなので、拡大や縮小するのが簡単。拡大したデータも拡大したサイズで再表現するのでキレイです。アイコンフォントはどんなサイズにしてもキレイってこと。これは、様々なサイズで表示しないといけない場合に、個別に画像を用意するなんてことはしなくてもいいからとてもありがたい。モバイル対応したレスポンシブサイトなどでは非常に有効です。色が簡単に変えられるアイコンフォントはフォントです。CSSを使って色だって変えられます。アイコンフォントはフォントです何度も言うようにアイコンフォントはフォントです。大きさを変えたり色を変えたりっていうのは、つまりCSSが効くってことです。キリがないのでここで書いておきます、CSSでお好きなように変化させることができます。高度な使い方:beforeという疑似要素を使えばリストアイコンに好きな記号を使えます。具体的にはここで書きました。no=”4838′′]この中の「WEBフォントを使ったリスト」で、フォントを使ったリストを紹介しています。フォントを使ったリストができる・・・・うん、つまりアイコンフォントだってフォントだからリストアイコンにすることができるんだね。#f90;}テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこんな風に、リストのアイコンを簡単にオシャレにできます。ここで、content:’\f1b9′としたこの文字コード。これもFontAwesomeのサイトで調べることができます。フォントなので、フォントでできることはアイコンフォントで可能です。使い方を工夫すればホームページをもっとオシャレにしてくれます。[Service]0-0これも読もう!関連する内容の記事HTMLとCSSで画像やWEBフォントを使って自由にリストを表現する3つの方法メリットいっぱいのWEBフォントでデザインと運用効率を両立。WEBフォントについて知っておこう。疑似要素:before、:afterを使って使いまわせる便利なオシャレデザインを作りましょう。スマートフォン対応サイトを作るときに抑えておきたい14のこと。次の投稿ホームページのアクセスを最大限に上げるSEO手順を実践中まずはご相談から、ホームページを作るのがはじめての方も気軽にお問い合わせ下さい。無料お見積りAIチャットで質問AIチャットでご質問くださいホームページの制作について聞きたいことはありませんか。AIがあなたの質問にお答えします。下のフォームに質問文を入れて聞いてみてください。|関東の方もホームページの制作を対応いたします。reserved.ホームページ制作YCOMトップホームページに必要な費用ホームページ制作料金ホームページ制作の流れオリジナルホームページホームページ制作実績ホームページ活用事例お客様の声よくある質問お問い合わせホームページの制作見積り依頼パートナー募集フォーム。