CSSでFontAwesomeなどのWebフォントを背景画像として扱う

CSSでWebフォントの背景化を行う方法です。透かしのように使えたりするので、とても便利なテクニックです。

文字を配置

Twitter

.web-font-bg 
{
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 1.8em;
  background-color: #1da1f3;
}

このボックスの中に、Twitterのブランドアイコンを配置したいと思います。

アイコンを配置

Twitter

.web-font-bg 
{
  position: relative;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 1.8em;
  background-color: #1da1f3;
}
.web-font-bg:before 
{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50px;
  content: '\f099';
  color: #71c9f8;
  font-size: 100px;
  font-family: fontAwesome;
}

position でアイコンを配置します。このままだと文字の上にアイコンがある状態です。

contentの値

.web-font-bg:before の content の値にはUnicodeを指定します。

重なり順を変更

Twitter

.web-font-bg 
{
  position: relative;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 1.8em;
  background-color: #1da1f3;
  z-index: 1;
}
.web-font-bg:before 
{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50px;
  content: '\f099';
  color: #71c9f8;
  font-size: 100px;
  font-family: fontAwesome;
  z-index: -1;
}

z-index で重なり順を指定してあげれば完成です！Webフォントが主流になりつつある今、覚えておくとよいテクニックですね。