CSS疑似要素で、フォントアイコンを書く

ブラウザ表示で期待するHTML

<i class="plus-icon">&#xecf2;</i>

フォントアイコンで必要な基本的なCSSは書いてあるとする。
失敗するパターン。。。

.plus-icon::before{
   content: "&#xecf2;";
}

これはダメである
挿入する疑似要素がそのままの文字列が出てしまい、フォントアイコンにならない。
こういう特殊文字は以下のようにしなければならない。
(1) & を \(バックスラッシュ)に変更する。
(2) #とxをそれぞれ0に変更する(または削除)
(3) ;(セミコロン)を削除

正しくは、、、

.plus-icon::before{
   content: "\00ecf2";
}

である。

今回のフォントアイコンは、Fontello - icon fonts generator です。

改めて全てを書くと、、
HTML

<i class="plus-icon"></i>

CSS

@font-face{
   font-family: 'fontello';
   src: url('../font/fontello.eot');
   src: url('../font/fontello.eot#iefix') format('embedded-opentype'),
        url('../font/fontello.woff') format('woff'),
        url('../font/fontello.ttf') format('truetype'),
        url('../font/fontello.svg#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
}
.plus-icon{
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   font-size: 32px;
   display: inline-block;
   text-decoration: inherit;
   cursor: pointer;
   color: #606060;
   margin: 4px 4px;
}
.plus-icon::before{
   content: "\00ecf2";
}