BloggerでGoogleマテリアルアイコンを使うメモ

備忘録

リンク

BloggerでGoogleフォントのマテリアルアイコンを使う手順

face ←こういうの

  1. Bloggerのテーマの「カスタマイズ」右横にある▼を押してHTML編集に入る。
  2. <head>直下に下記のタグを書き込んで保存する。
  3. Googleフォントのiconページで使いたいものを探して選び、icon font欄にあるフォント名を確認する。
    （「face」とか「link」とかそういうの）
  4. 記事投稿画面でメニューアイコン左端のHTML編集に入り、表示させたい位置に下記のように(3)で確認したアイコン名を含めたタグを書き込む。

    <span class=”material-icons”>face</span>

以上。
ちなみに記事投稿画面ではアイコンは確認できない。実際のページ表示時に適用されます。

<head>タグ直下に書く内容

<link href=’https://fonts.googleapis.com/icon?family=Material+Icons’ rel=’stylesheet’/>
<style>
.material-icons {
  font-family: &#39;Material Icons&#39;;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: &#39;liga&#39;;
  display: inline-flex;
  vertical-align: middle;
    }
  </style>

Blueskyでシェア