元ニート中卒派遣30代ブサメン童貞のブログ

みんなが存在に疑問を感じている「元ニート、中卒、派遣、30歳超えのブサメン童貞」が実際に生息し、そして「どうやって生きてるか」を晒していくブログ

Font Awesomeを使う

引き続きPHPでやりたいことはぎょうさん残っているのですが、最近は少しずつCSSとデザインの勉強もしています。嘘です。デザインは勉強していません。勉強のしかたがよくわかりません。レイアウト面に関してはBootstrap先生に頼りきることでお茶を濁す予定ですが、細かい装飾面はPhotoshopなんぞ永遠に入手できない僕には高すぎるハードルです。そこで、Font Awesome

王さん

クッソわかりやすい説明を見つけたので、今回もまた引用してみます。座右の銘は「人の褌で相撲を取る」です。

ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

大きな括りで言ってしまえばブログもウェブサイトなんじゃないかという気も少ししましたが、そんな細かいことはどうでもよくて、おそらくいちばん役に立つのが拡大してもジャギらないし、色も簡単に変えられるということ。これだけで即戦力。採用決定。

使い方1.コピペする

いくつか方法があるときは、その中から最も困難なやり方を選ぶ。これが伸びる秘訣。というわけで、いちばん簡単なCDNでいきます。CDNの意味は知らなくてもなんとでもなります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

まずはこれをHTMLの<head>内にコピペ。今回はfa-checkを使ってみることにします。

使い方2.アイコンを選ぶ

こ↑こ↓から使いたいアイコンを選びます。

使い方3.CSSで使う

単純にFont Awesomeを使うだけなら以下のように書いてしまえばOKなんですが……

<i class="fa fa-check" aria-hidden="true"></i>

これだと<i>以外のタグに適用させたいときや、拡張して使いたいときに面倒です。なので、CSSでコントロールできるように、とりあえずHTMLは以下のように感じで書くとします。

<p><span class="check">チェックマーク</span>を使います。</p>

疑似要素とか意味がわからないことを理解するのは諦めて、このCSSで重要なのはcontentプロパティ。fa-check: Font Awesome Iconsに記載されているUnicode:の値をcontentプロパティに指定します。

.check:before {
  font-family: FontAwesome;
  content: '\f00c';
}

できました!色や余白をいじりたいときは……

.check:before {
  font-family: FontAwesome;
  content: '\f00c';
  color: #337ab7;
  padding-right: 5px;
}

パパパっとやって、終わりっ!

広告を非表示にする