GoogleマテリアルアイコンでCSSコンテンツプロパティを設定する方法は？

Question

Googleマテリアルアイコン「シェブロンアイコンを右に」（ https://design.google.com/icons/#ic_chevron_right ）を次のCSSコンテンツプロパティに挿入するにはどうすればよいですか。

.bullet li a:before {
    content: "";
}

Answer 1

2018年に更新

Googleは、IE9以前で表示されていたコードを削除しました。コードを取得するには、GitHubリポジトリのcodepointsファイルにアクセスしてください。

GitHubリポジトリのコードポイントへのリンク： https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

---

ステップ1：マテリアルアイコンスタイルシートを含めます。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

ステップ2 ：

CSSコード：

.bullet li a:before {
    font-family: "Material Icons";
    content: "\e5cc";
}

説明：値e5ccは、シェブロンに表示されるコードです。

Answer 2

::before {
    font-family: 'Material Icons';
    content: "\E87C";
}

::after {
    font-family: 'Material Icons';
    content: "face";
}

http://codepen.io/estelle/pen/MwvOjd

Answer 3

これをRTLモードに使用できます。

.bullet li a:before {content: '\E5CB';}

Answer 4

これを試して。

.bullet li a:before {
    font-family: FontAwesome;
    content: "\f054";
}

コンテンツの値についてはこちら を参照できます

Answer 5

materialdesignicons.com から縮小されたCSSをすでに含めている場合は、代わりにMaterial Design Iconsフォントファミリを使用します。

::after {
    font-family: 'Material Design Icons';
    content: "\f054";
}

便利な チートシート も利用可能です。