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に追加する事でサイズや装飾なども指定できます。
アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。
ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
関連記事
2022/07/23
ペライチでホームページ作成って今までやったことなかったので、なんとなく触ってみたくなったので試してみました。この記事を書きながら作成していきます。 ...
2022/07/14
GIMPにPhotoShopのようなレイヤー効果を追加する方法をご紹介します。Windows版のやり方やレイヤー効果を追加するファイルはすぐに見つかったのですが...
2022/07/11
WebP (ウェッピー)は、トラフィック量軽減と表示速度短縮を目的としてGoogleが開発した次世代画像フォーマット（2010年に仕様公表・提供開始）のことで拡...
2022/07/06
HTML/CSSのサポート状況を確認できるサイトをご紹介します。最新の機能を使ってみたい方はチェックしてみると良いかもしれません。ちなみにHTML5は最終バージ...
2022/07/05
日立社会情報サービスは、ホームページのテキストを通常の日本語よりも平易な日本語に変換することができる「『やさしい日本語』変換サービス」の販売を開始しました。 在...