[css]GoogleフォントのMateial Iconsを自鯖で使う方法

大したことはしてないけどね。

何でそんな事するか

読み込みがちょっと遅いから自鯖でやったら解消するかもって思ってる人用。

フォントファイルのダウンロード

ここからDLする。

GitHub - google/material-design-icons: Material Design icons by Google

Material Design icons by Google. Contribute to google/material-design-icons development by creating an account on GitHub...

github.com

用があるのは「font」ディレクトリだけ。

.ttf、.otfで計5つのファイルを取ってきて、自分の都合のいいディレクトリに入れる。

CSSで有効化

フォントを使うためには一旦@font-faceで宣言する必要がある。

@font-face {
    font-family: 'material icons';
    src: url(../font/MaterialIcons-Regular.ttf);
}

こんな感じ。

使うのはいつもどおり。

div::before{
    content: "\ef6b";
    font-family: "material icons";
}

おしまい。