Google推奨のマテリアルアイコンも結構いいかも
WEB関係
2021/03/04
Googleが提供し始めた無料のアイコンフォント
普段はFont Awesomeにお世話になっていますが、良さそうなのでご紹介。
Font Awesomeについての記事はこちら
WEB FONTの読み込み
<head>〜</head>の間に下記を入力。
|
1 2 3 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
これでWEB FONTの読み込み環境が整いました。
記述する場所については特に指定はないですが、分からなかったら似たようなコードが書かれている部分でOKですよ。
問題ないだろうけど、うまく表示されなかったら読み込みの順番（行）とか変えてみてください。
ICONの表示方法
Font Awesomeとはちょっと違うのですが、感覚的に扱いやすいかと思います。
|
1 2 3 |
<i class="material-icons">xxx</i> |
xxxの部分に各ICONに指定されているテキストを入れて表示させます。
表示例
<i class=”material-icons”>pets</i>
pets
<i class=”material-icons”>watch</i>
watch
サイズや色を指定も簡単ですよ
Googleの公式ドキュメントにも記載されていますが、classに追加する事でサイズや装飾なども指定できます。
アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。
当サイトはPWYW（Pay what you want）方式を採用しています。
この記事が参考になったり、サイト全体をご評価いただいた場合にお支払い頂ければ幸いです。
金額は自由に決められます。 PayPalで支払い
この記事が参考になったり、サイト全体をご評価いただいた場合にお支払い頂ければ幸いです。
金額は自由に決められます。 PayPalで支払い
お気軽にお問い合わせください！
WordPressのカスタマイズや修正、オリジナルテーマの作成などリーズナブルな価格でご提供します。 お気軽にご相談下さい。 お問い合わせはこちら関連記事
Twitterのシェアリンクのテキストにハッシュタグやスペースを追加、ついでにWordPressで使用方法
2021/08/28
Twitterのシェアリンクにハッシュタグやスペースを追加する方法です。 基本的なシェアリンクのURL https://twitter.com/s...
フリーで使えるWebアイコンをホームページやブログにいかがですか？
2020/10/12
各種アイコンなどフリー素材を配布しているサイトは多いですが、画像をダウンロードしてサーバーにアップしたりなど少し手間がかかりますよね。そんな時はWrbアイコンの...
テンプレを使用しYouTubeのチャンネルアートをデバイス毎に意識して作成
2020/06/18
YouTubeのチャンネルアートを作成する機会があったのでメモ。公式のテンプレートを使用し各デバイスでの表示の際もテキストの見切れの無いように作成する方法です。...