SVG

Material iconsを使う

とりあえずGoogleがApache Licenseで公開しているMaterial iconsを使ってみる
使い方はMaterial Icons Guideに全て書いてある

準備

Photoshop等で表示させる場合は、MaterialIcons-Regular.ttfをダウンロードしてインストールしておくと表示できるようになります。

デザイナーのためのGoogle Material iconsの使い方

表示させる

下記さえ書けば表示される。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">&#xE24D;</i>

CSSでbackgroundで表示させることもできるが、この方法だとcolorなどが指定できないのでSVGファイルを編集してアップロードする必要がある。これだとpngとあまり変わらない(滑らかな表示にはなる)。

<em>Menubar</em>
em{background:url(../image/common/document_9px.svg) no-repeat;}

フォントファイルを読み込んで、beforeでフォントを指定する方法だとHTMLに追記せずに装飾変更も自由にできる。
IE6-8向けにeotファイルを読み込む必要はもうないんじゃないかなと思いますが、woff2/woff/ttfは必要そう。削るとしたらttf。

CSSのWebフォント指定に関する考察 2016年版

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
<li class="elCart">
<a href="">ボタン名</ a>
</li>
.elCart > a::before {
    position: absolute;
    content: "";
    font-family: "Material Icons";
    speak: none;
    font-size: 32px;
    line-height: 1;
    width: 26.8576px;
    text-indent: -1.1424px;
    top: 50%;
    margin-top: -16px;
    left: 0;
    color: #333;

SVGファイルを編集する

オンラインで編集できるエディタがいくつかありますが、基本的に色や大きさの変更はCSSでやったほうが楽。

参考

https://qiita.com/yamamiweb/items/011d6b264a5af568783b


最終更新: 2018-01-08 (月) 13:10:50