CSSの:beforeに を設定する

  css, css3, webフォント 

photo credit: Nina Matthews Photography via photopin cc

相当な小ネタですが、よく使うくせによく忘れるので自分のための備忘録です。

最近アイコンフォントを使う機会が増えたので、CSSの:beforeを使用してフォント指定することが日に20度はあります。

その際、ちょっとアイコンとの隙間を開けたいな・・・という時に
「空白( )ってどうやって指定すんだっけ・・・?」と手が止まるとか無駄無駄無駄・・・ですよね。

ただでさえ忙しいというのに!!

photo credit: Nina Matthews Photography via photopin cc

何はなくともバシッとUnicode。

例としてFont Awesomeで「¥」を出力する場合です。

まずはフォント自体を表示させたいので、exampleページからUnicodeを確認します。

sc

赤枠部分でUnicodeが確認できます。

とりあえず表示させる

htmlはこんな感じで。

ほんでもってヘッダーなどでCDNからfont-awesomeのcssを読み込んで、

cssをこのように指定。

表示OK!

sc1

しかし文字間、キッツキツ!

そこで をUnicodeで指定だ。

できた!

スクリーンショット(2014-06-11 17.23.11)

バランス良し!

要するに:beforeや:afterで を指定するときはこれで!

もう忘れないぞ〜!

コレ聴きながら書きました!

たまにPrinceを無性に聴きたくなります。ほんとになんでも出来ますよね。この人。そして、歳を取らない。

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

関連記事

記事はありませんでした

ad

wpx

  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
PAGE TOP ↑