[CSS] 疑似要素(::before)にある content: “\e900″が何か調べた

こんにちは。

CSSで疑似要素(::before)に

content: “\e900”

とか、

content: “\e901”

とか書かれているものが何か良く分からなかったので、調べました。

アイコンを指定している

content: “\e900″ で指定している、”\e900” は、

『icomoon』というサービスで作成したアイコンのようです。

上記のサイトで、欲しいアイコンを検索します(例:twitter, facebook)

検索すると、アイコンがたくさん出てきます。

欲しいアイコンを選択し、” Generate Font ” を押すと、

  • アイコン
  • HTML
  • CSS

などが生成されます。

このとき、生成したアイコンに対するCSSが 、”\e900″ といった名前になっています。

アイコンをダウンロードして、ブログ等のサーバーにアップロードします。
HTMLとCSS(class::before {content: “\e900”; } )を記述すると、アイコンが表示されます。

いろんなアイコンがあって、簡単に表示できるので便利です。