Webアイコン＆Webフォント
サンプル
別窓目次
概要
web上で使えるアイコンやフォントです。
ダウンロードして使うものもありますが、ここではコピペで簡単にできるもののみを紹介します。
直リンクで使えるアイコンやフォントみたいなイメージです。
サイトでワンポイントに使えたり、アクセントを加えるのにちょろっと使ってみるのもいいかもしれません。
このサイトでもかわいいので所々で使っています。別窓リンクの右上にある、なんか別窓で開きそうなアイコンがそれです。
Webフォントもたくさんの種類が手軽に使えるのでホームページの雰囲気を好きなものに変えてみてください。
サンプルでは、Webアイコンは上から適当に5種類、サイズ違い、アニメーション、適当なボタンとフォームを、
Webフォントは適当に3種類のフォントを表示してみています。
2019.06
Webアイコン
Font Awesome
公式
まず、<head>～</head>に次のコードをぶちこみます。
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">
準備はこれだけです。
公式サイトのIconsに行きます。
ここで紹介するものはフリーのものだけなので「Free」を選択しておいてください。
あとは、左メニューでカテゴリを選択したり、英語で上の検索ボックスにワードを入れて目当てのものを探してください。
フリーのものだけでも1500以上のアイコンがあります。
お好きなアイコンを選択したら、そのアイコンのページにコードがあります。クリックするとコピーできます。
そうしたらコピーしたコードを、アイコンを使いたい箇所に貼り付けるだけです。
基本はこれだけです。
Font Awesomeがすごいところは、数もそうですが、オプションも用意してくれているのもすごいです。
例えばサイズを変えたいだとか、ちょっと回したいときとか、わざわざcssを用意しなくても、コピーした<i>タグのclassにちょろっと文字を増やすだけでできます。
公式の下の方にある「Play with Our Icons」ってところで、ポチポチするだけでできるプレビュー付きの簡単な使い方説明があります。
こんなかんじですね。一番下のようにclassにスペースで区切れば複数のオプションを付けられます。
<i class="fas fa-skull"></i> <!-- 通常時 --> <i class="fas fa-skull fa-xs"></i> <!-- サイズXS --> <i class="fas fa-skull fa-sm"></i> <!-- サイズSM --> <i class="fas fa-skull fa-lg"></i> <!-- サイズLG --> <i class="fas fa-skull fa-2x"></i> <!-- サイズ2X --> <i class="fas fa-skull fa-rotate-90"></i> <!-- 90度回転 --> <i class="fas fa-skull fa-rotate-180"></i> <!-- 180度回転 --> <i class="fas fa-skull fa-rotate-270"></i> <!-- 270度回転 --> <i class="fas fa-skull fa-flip-horizontal"></i> <!-- 左右反転 --> <i class="fas fa-skull fa-flip-vertical"></i> <!-- 上下反転 --> <i class="fas fa-skull fa-spin"></i> <!-- 常時回転（なめらか） --> <i class="fas fa-skull fa-pulse"></i> <!-- 常時回転（カクカク） --> <i class="fas fa-skull fa-2x fa-spin"></i> <!-- サイズ2Xで常時回転 -->
これらは元から用意されていますが、Font Awesome Animationで配布しているcssを用いれば、他のアニメーションも同様な書き方で楽々できます。
このcssはFont Awesomeのアイコンでなくても一部を除き使えるのでめちゃくちゃ便利です。
Google Material Icons
公式
まず、<head>～</head>に次のコードをぶちこみます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
準備はこれだけです。
公式サイトに行きます。
アイコンがずらっと並んでいますね。左でワード検索やカテゴリ選択ができるので、お好きなアイコンを探してください。
アイコンをクリックすると、画面左下の方に「Selected Icon」とかいうのがにゅっと出てきます。
そこをクリックするとにゅっと上に伸びるので、そこに書かれている「<i class="material-icons">アイコン名</i>」をコピーしてください。
そうしたらコピーしたコードを、アイコンを使いたい箇所に貼り付けるだけです。
Google Material Iconsにオプションなんかはありませんが、サイズや色変更は文字と同じようにできます。
<head>
<!-- googlematerialicons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
.material-icons.md-48 { font-size: 48px; } /* サイズを48pxにする */
.material-icons.col_orange { color: orange; } /* 色をオレンジにする */
</style>
</head>
<body>
<i class="material-icons">hot_tub</i><br> <!-- そのまま -->
cssで定義する<br>
<i class="material-icons md-48">hot_tub</i><br> <!-- 大きさを変える -->
<i class="material-icons col_orange">hot_tub</i><br> <!-- 色を変える -->
<i class="material-icons md-48 col_orange">hot_tub</i><br> <!-- 大きさも色も変える -->
htmlに直書き<br>
<i class="material-icons" style="font-size:48px;">hot_tub</i><br> <!-- 大きさを変える -->
<i class="material-icons" style="color:orange;">hot_tub</i><br> <!-- 色を変える -->
<i class="material-icons" style="font-size:48px;color:orange;">hot_tub</i><br> <!-- 大きさも色も変える -->
</body>
こうなります。
アニメーションやなんかも自分でcssを書けば済みますが、Font Awesome Animationで配布しているcssを利用するのが一番楽ですね。
サンプルでも回転している風車の一番右のはFont Awesome Animationで動かしています。
Foundation Icon Fonts 3
公式
まず、<head>～</head>に次のコードをぶちこみます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
準備はこれだけです。
公式サイトに行きます。
アイコンがずらっと並んでいるので、お好きなアイコンを探してください。
アイコン名を下のタグに差し替え、使いたい箇所に貼り付けます。
<i class="fi-アイコン名"></i>
サイズや色変更はGoogle Material Iconsと同じ方法でできます。
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<style type="text/css">
.md-48 { font-size: 48px; } /* サイズを48pxにする */
.col_orange { color: orange; } /* 色をオレンジにする */
</style>
</head>
<body>
<i class="fi-safety-cone"></i><br> <!-- そのまま -->
cssで定義する<br>
<i class="fi-safety-cone md-48"></i><br> <!-- 大きさを変える -->
<i class="fi-safety-cone col_orange"></i><br> <!-- 色を変える -->
<i class="fi-safety-cone md-48 col_orange"></i><br> <!-- 大きさも色も変える -->
htmlに直書き<br>
<i class="fi-safety-cone" style="font-size:48px;"></i><br> <!-- 大きさを変える -->
<i class="fi-safety-cone" style="color:orange;"></i><br> <!-- 色を変える -->
<i class="fi-safety-cone" style="font-size:48px;color:orange;"></i><br> <!-- 大きさも色も変える -->
</body>
こうなります。
サンプルを見ておかしいと思った方もいらっしゃると思いますが、Foundation Icon Fonts 3ではアニメーションが使えません。
詳しく見ていないので本当はできるのかもしれませんが、少なくともFont Awesome Animationでは動かせません。
種類も283と他と比べたら少ないですが、ちょっとニッチなところなのかもしれません。
カラーコーンがあるのはここだけです。（たぶん）
Ionicons
公式
まず、<head>～</head>に次のコードをぶちこみます。
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
準備はこれだけです。
公式サイトに行きます。
アイコンがずらっと並んでいるので、お好きなアイコンを探してください。
アイコンをクリックすると、画面下から黒いバーがにゅっと出てきます。
そこにかかれているコードをクリックするとコピーできるので、使いたい箇所に貼り付けます。
Ioniconsの特徴は、各アイコンにiosバージョンとmdバージョン（ios以外と思っていただければ）があることです。
ひとつのアイコンでも2パターンあるということです。
ここで切り替えられます。
同じアイコンでも全然違いますね。
サイズや色変更はGoogle Material Iconsと同じ方法でできます。
<head>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
<style type="text/css">
.md-48 { font-size: 48px; } /* サイズを48pxにする */
.col_orange { color: orange; } /* 色をオレンジにする */
</style>
</head>
<body>
<ion-icon name="pizza"></ion-icon><br> <!-- そのまま -->
<br>
cssで定義する<br>
<ion-icon name="pizza" class="md-48"></ion-icon><br> <!-- 大きさを変える -->
<ion-icon name="pizza" class="col_orange"></ion-icon><br> <!-- 色を変える -->
<ion-icon name="pizza" class="md-48 col_orange"></ion-icon><br> <!-- 大きさも色も変える -->
<br>
htmlに直書き<br>
<ion-icon name="pizza" style="font-size:48px;"></ion-icon><br> <!-- 大きさを変える -->
<ion-icon name="pizza" style="color:orange;"></ion-icon><br> <!-- 色を変える -->
<ion-icon name="pizza" style="font-size:48px;color:orange;"></ion-icon><br> <!-- 大きさも色も変える -->
備わってる機能<br>
<ion-icon name="pizza" size="small"></ion-icon> <!-- size="small"を指定 -->
<ion-icon name="pizza" size="large"></ion-icon> <!-- size="large"を指定 -->
<ion-icon ios="ios-alarm" md="md-alarm"></ion-icon> <!-- OSにそれぞれ対応 -->
<ion-icon name="ios-alarm"></ion-icon> <!-- iosバージョンを表示 -->
<ion-icon name="md-alarm"></ion-icon> <!-- mdバージョンを表示 -->
</body>
こうなります。
一応サイズ変更はsize属性を使ってできる機能があるので22～23行目でコードを書いておきますが、smallかlargeにしかできないので、細かいサイズ指定がしたい方はfont-sizeで変更する方法にしてください。
25～27行目ではバージョン違いの表示方法です。それぞれ「ios-」「md-」と頭に付ければできます。
環境がないので確認していませんが、25行目のような書き方をすればOSごとに表示アイコンを変えられるそうですが、眉唾です。
Webフォント
Google Fonts
公式
公式サイトで使いたいフォントを探しに行きます。
ここで言語を選択できます。
線の太さを選択できるフォントもあります。ここに▼があるものはできます。
好きなフォント、線の太さを選んだら、各フォント右上にあるをクリックすると右下に黒いバーが出てきます。
黒いバーをクリックすると、<link ～>とfont-family～というコードが二つ出てくるのでそれぞれをコピーします。
ちなみにフォントは複数選択でき、<link ～>は1行でまとめてくれます。
<head>
<!-- googlefonts -->
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Noto+Serif+JP:900|Sawarabi+Gothic&display=swap" rel="stylesheet">
<style type="text/css">
.font1 { font-family: 'Sawarabi Gothic', sans-serif; }
.font2 { font-family: 'Noto Serif JP', serif; }
.font3 { font-family: 'Kosugi Maru', sans-serif; }
</style>
</head>
<body>
<p class="font1">ポンデリング</p>
<p class="font2">ポンデリング</p>
<p class="font3">ポンデリング</p>
</body>
このように<head>～</head>内に<link ～>を（3行目）、css部にfont-family～を（5～7行目）それぞれ貼り付けます。
Google Fonts + 日本語
公式
本家Google Fontsを見た方、えっ日本語ってこれしかないの、と思いますよね。さすがに世界のGoogle先生も日本語はそんなに用意できていません。
そこで日本語フォントの特設ページを用意してくれたのがこちらのGoogle Fonts + 日本語です。
ここでは将来的に本家に並ぶフォントのサンプルを公開しています。サンプルですが普通に使えます。
公式サイトで使いたいフォントの右側にHTMLとCSSのコードがあるので、それをコピーします。
コードに微妙に差異はありますが、本家と使い方は一緒です。
<head>
<!-- googlefonts -->
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet">
<style type="text/css">
.font1 { font-family: "Nico Moji"; }
.font2 { font-family: "Nikukyu"; }
.font3 { font-family: "Kokoro"; }
</style>
</head>
<body>
<p class="font1">ポンデリング</p>
<p class="font2">ポンデリング</p>
<p class="font3">ポンデリング</p>
</body>
Leafscape
公式
日本語フォントもっとないの？って方はこちらを見てください。めちゃくちゃ種類あります。80くらい？
ここはフリーで再配布可の日本語フォントをwebフォント化してくれているサイトです。
ドウジンカツドウ！製本等でネットでフリーのフォントをダウンロードして使った経験がある方、そのフォントは覚えていますか？
そのフォントをホームページでも使えるんです。しかもダウンロードなんかしなくてもコピペで。すごい。
公式サイトで使いたいフォントを探しましょう。
フォント一覧から使いたいフォントを見つけたら、「コードを取得」ボタンを押します。
「使用」の欄にコードがあるので、それをコピーします。
<head>
<style type="text/css">
@font-face
{
font-family: やさしさゴシック;
src: url('https://cdn.leafscape.be/Yasashisa/YasashisaGothic_web.woff2')
format("woff2");
}
@font-face
{
font-family: たぬき油性マジック;
src: url('https://cdn.leafscape.be/TanukiMagic/TanukiMagic_web.woff2')
format("woff2");
}
@font-face
{
font-family: 水面字;
src: url('https://cdn.leafscape.be/minamoji/minamoji_web.woff2')
format("woff2");
}
.font1 { font-family: "やさしさゴシック"; }
.font2 { font-family: "たぬき油性マジック"; }
.font3 { font-family: "水面字"; }
</style>
</head>
<body>
<p class="font1">ポンデリング</p>
<p class="font2">ポンデリング</p>
<p class="font3">ポンデリング</p>
</body>
3～8、9～14、15～20行目がコピーしたコードを貼り付けたところです。例のごとく3つも使ってみました。
21～23行目で、どこで各フォントを使うか指定しています。「font-family」はコピーしたコードの「font-family」と同じにします。
目当てのフォントのページに赤字で「重いフォントです」と注意書きがあることがあります。
日本語フォントが基本ファイルがでかいので大半のフォントに注意書きがされていると思います。
たしかにページが重いと開くのにめっちゃ時間かかって嫌ですが、技術の進歩でそれも昔話になりつつあります。
いまや高速ｲﾝﾀｰﾈｯﾂなので大して気にならないレベルに使用できます。
ここのサンプルページでもwebアイコンwebフォント呼びまくってますが、さほど気になりませんよね。
ほんとこのサイトは偉大だと思います。