アイコンは【Font Awesome】だけじゃない 超便利【Icongram】

アイコンは【Font Awesome】だけじゃない 超便利【Icongram】

webのあれこれ
2018/02/25 3
vanillaice (Akira)
vanillaice (Akira)
CSS IconFont サイト紹介

Font Awesome おぅさむおうさむ うっせーわ ヤァ(⊃ Д)⊃ 三 ∧_∧
などと思っているわけではありませんが、大概聞き飽きた感もあり。

Font Awesome利用ページの修正をしておりまして。もうマジで嫌気さしてきた((((笑)
というわけで逃避的に IcongramもFont Awesomeに負けてないよ の紹介をしようと思います。

Home - Icongram, serving you 5114 icons on the fly

Icongram serves you 5114 icons from your favourite icon library on the fly 🚀.

Icongramが手軽に使いやすい理由

Font Awesome(以下 FA と称す)を利用する場合には

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

上記をhead内あるいはbody終了タグ直前に入れるか、または

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

上記をhead内に入れるか(CSSの場合はbody直前には置けません)
こうしてリンクしなきゃいけませんよね。
で、バージョン5ではJSとCSSとがあります。どっちか選ぶところから考えなきゃアカンのか、と。

えと。どちらか選ぶ んですよ。両方入れるのではなくて
ここみなさん大丈夫ですか (´・ω・`)
なんか両方どころかFA関連ファイルがhead内にてんこ盛りになってる方とかいらっしゃいますけども(笑)

Icongramも同じようにcdnでリンクする使い方もできますが、ファイルリンクなしでも使えます。
アイコン掲載時のURLがAPIも兼ねていますのでファイルリンク不要。
これは良いですよね。いやすごくイイ!!!
FAなんかはページ内でたった1個使用するだけでもいちいち元ファイルを参照して読み込まなければいけませんが、Icongramはそういった無駄が生じません。

拡大しても解像度は落ちません

ここはFAと同じですね。SVG ですのでJPGやPNGなど通常の画像のようなサイズ調整によるぼやけやジャギーは発生しません。
旧来のFA、あるいはCSSを選択した時のFAは「アイコンフォント」で「テキストの仲間」です。
バージョン5のJSを選択した時のFAは「SVG」で「画像の仲間」です。Icongramもコチラ。
JPGやPNGあるいはGIFという形式の画像は「ラスタデータ」といって劣化や容量の問題がつきまといます。
SVGは「ベクタデータ」といって劣化しません。かなり大きく表示しても解像度・容量共にほとんど変化しません。

Icongramの使い方

先に述べたようにファイルを置くこともできます。
その場合にはFAチックな感じで使えますね。html内容もi要素を利用しますし。
ここではその道は取らず、URLのみで掲載する 方法をご紹介します。

<img src="https://icongr.am/ここにライブラリ名/ここにアイコン名.svg?ここにオプション名" alt="">

こうして img要素 として掲載すればOKです。
これってめちゃくちゃ助かりますよね。
img要素で掲載できるということは、遅延読み込みの適用 なども可能です。
FAではできません (´・ω・`)

さて。まず ライブラリ名 ですが、IcogramというのはFAのように「自分ちで作成して自分とこで提供」をするサイトではありません。
FAを始めとする各種アイコンフォントサービスの表示を手助けする と言えば良いでしょうかね。
図書館みたいな感じ。ライブラリ。ってそのまんまじゃねーか

利用できるのは

clarity

clarityのアイコン一覧

devicon

deviconアイコン一覧

entypo

entypoアイコン一覧

feather

featherアイコン一覧

fontawesome

fontawesomeアイコン一覧

jam

jamアイコン一覧

material

materialアイコン一覧

octicon

octiconアイコン一覧

simple

simpleアイコン一覧

わぁ。しばらく見ないうちにすごい増えてるぞ
全9種ですね。太字の名称を「ここにライブラリ名」のところに入れます。
ここで表記している通り 全小文字・半角スペースなし で記載します(例えば Font Awesome も fontawesome と記します)
各サービスのアイコン揃えはフルバージョンではありませんので、それぞれお気に召すテイストのものがあれば御本家サイトへGO、という商法です(笑)

?ここにオプション名 の部分ですが、オプションとして用意されているのが

  • size
  • color
  • colored

上記3つです。「サイズ」「カラー」そして赤字の「カラード」ですが、こちらはライブラリ名「simple」専用でカラーと同じ役割です(アイコンの着色)

複数のオプションを利用する時には

<img src="https://icongr.am/feather/box.svg?size=100&amp;color=3b7fdf" alt="">


&amp; で繋ぎます。
これは一般的なパラメータの使い方と同じですね。最初のパラメータが ? で以降は &amp;

カラーオプションは 16進数(hex)コードを # なしで入れます

カラーを付ける際アイコン全体がベタ塗りになるか縁取りになるかはそのアイコンのデザインによります。

Icongramだって動かせる

アニメーションはなにもFAの専売特許というわけではありません。
アニメーションのCSSさえ適用すればほぼどんなアイコンでも動かせます。

Devicon vs. Font Awesome

こういうのはCSSでアニメーションのコードを書けばすぐにできますが、自分で書けないという方は恐らく font-awesome-animation
をお使いでしょうから、FAと同じ要領でimg要素に対してクラス名を付与すれば動きます。
ホントは限られたページだけで使うならstyle要素を使う方が良いんですけどね (´・ω・`)
(html5.2ではstyle要素のbody内使用が認められています)
使用頻度の低いCSSを常駐させるのはページスピードを遅らせる要因になりますし使わないアニメーションも読み込んでますし。

というわけで簡単ではありますが、たまには違うアイコン使ってみようぜのススメでした (o'ω')ノ

 3

There are no comments yet.
bon

Akiraさん
こんばんは。

Akiraさんがブログ記事本文のリンクにリンクのアイコンをつけておられますよね。私もそれをやりたい!と思っていろいろ調べているうち、こちらの記事を見つけてIcongramのことを知り、早速試してみました。できたみたいで嬉しいです。
※テストページをリンクしています。

別件で、Akiraさんがブログ記事内で使っておられる、「注意」や「ヒント」のようなボックスも、私も使いたいとずっと思っていて、空き時間に調べたりやってみたりしていました。
https://vanillaice000.blog.fc2.com/blog-entry-765.html
こちらの記事を見つけ、自力で移植、移植…?!ということで(そんなことができるのも知りませんでした)、こちらも挑戦してみました。結果をリンクしたページに載せています。今後使わせてもらいたいので、ご報告させていただきます。自力・自己責任というのは承知しておりますが、もし間違っていたら「間違ってる!」ことだけ教えていただけたら改めます。またもし、このことがNGでしたら即削除いたしますのでその点もご指摘下さい。
いつもお世話になってありがとうございます。よろしくお願い致します。

2020/04/27 (Mon) 21:03
vanillaice (Akira)
Akira
To bonさん

bonさん、こんばんは ('0')/

間違い等は特にありません。大丈夫です。また、NGといったこともありませんのでスタイリングがお気に召せばどうぞご利用ください。
ご丁寧にありがとうございます :)

* attention, hintの装飾はいわゆる「独自クラス」なのでテンプレート変更時には移植を忘れないようにしてくださいね。
移植し忘れてもレイアウトが著しく乱れることはありませんが、装飾(スタイリング)は失われます。
また装飾に飽きたときには同じクラス名に異なる装飾をあてることも可能です。

2020/04/27 (Mon) 23:10
bon
To Akiraさん

ありがとうございます!
また間違って必要なものを削除してしまったり、あれやこれやで表示がおかしくなったら…と緊張していましたので、合っていて嬉しいです。また、気持ちよく使用を認めて下さりありがとうございます。

テンプレート変更の際の移植を忘れないようにですね。はい、ありがとうございます。CSSの書き方がMyStyleと違い複雑で、奥の深さを感じました…^^;
難しいけど面白いです。
今後とも、よろしくお願い致します。

2020/04/28 (Tue) 07:21

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ