Font Awesome おぅさむおうさむ うっせーわ ﾔｧ(⊃ Д)⊃ 三 ∧_∧
などと思っているわけではありませんが、大概聞き飽きた感もあり。
Font Awesome利用ページの修正をしておりまして。もうマジで嫌気さしてきた((((笑)
というわけで逃避的に IcongramもFont Awesomeに負けてないよ の紹介をしようと思います。
Icongram: icons on the fly 🚀
Icongram serves you over 10000 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を始めとする各種アイコンフォントサービスの表示を手助けする と言えば良いでしょうかね。
図書館みたいな感じ。ライブラリ。ってそのまんまじゃねーか 
利用できるのは
わぁ。しばらく見ないうちにすごい増えてるぞ 
全9種ですね。太字の名称を「ここにライブラリ名」のところに入れます。
ここで表記している通り 全小文字・半角スペースなし で記載します(例えば Font Awesome も fontawesome と記します)
各サービスのアイコン揃えはフルバージョンではありませんので、それぞれお気に召すテイストのものがあれば御本家サイトへGO、という商法です(笑)
?ここにオプション名 の部分ですが、オプションとして用意されているのが
- size
- color
- colored
上記3つです。「サイズ」「カラー」そして赤字の「カラード」ですが、こちらはライブラリ名「simple」専用でカラーと同じ役割です(アイコンの着色)
複数のオプションを利用する時には
<img src="https://icongr.am/feather/box.svg?size=100&color=3b7fdf" alt="">
& で繋ぎます。
これは一般的なパラメータの使い方と同じですね。最初のパラメータが ? で以降は &
カラーオプションは 16進数(hex)コードを # なしで入れます。
カラーを付ける際アイコン全体がベタ塗りになるか縁取りになるかはそのアイコンのデザインによります。
Icongramだって動かせる
アニメーションはなにもFAの専売特許というわけではありません。
アニメーションのCSSさえ適用すればほぼどんなアイコンでも動かせます。
Devicon vs. Font Awesome
こういうのはCSSでアニメーションのコードを書けばすぐにできますが、自分で書けないという方は恐らく font-awesome-animation
をお使いでしょうから、FAと同じ要領でimg要素に対してクラス名を付与すれば動きます。
ホントは限られたページだけで使うならstyle要素を使う方が良いんですけどね (´・ω・｀)
(html5.2ではstyle要素のbody内使用が認められています)
使用頻度の低いCSSを常駐させるのはページスピードを遅らせる要因になりますし使わないアニメーションも読み込んでますし。
というわけで簡単ではありますが、たまには違うアイコン使ってみようぜのススメでした (o'ω')ﾉ
Akiraさん
こんばんは。
Akiraさんがブログ記事本文のリンクにリンクのアイコンをつけておられますよね。私もそれをやりたい！と思っていろいろ調べているうち、こちらの記事を見つけてIcongramのことを知り、早速試してみました。できたみたいで嬉しいです。
※テストページをリンクしています。
別件で、Akiraさんがブログ記事内で使っておられる、「注意」や「ヒント」のようなボックスも、私も使いたいとずっと思っていて、空き時間に調べたりやってみたりしていました。
https://vanillaice000.blog.fc2.com/blog-entry-765.html
こちらの記事を見つけ、自力で移植、移植…？！ということで（そんなことができるのも知りませんでした）、こちらも挑戦してみました。結果をリンクしたページに載せています。今後使わせてもらいたいので、ご報告させていただきます。自力・自己責任というのは承知しておりますが、もし間違っていたら「間違ってる！」ことだけ教えていただけたら改めます。またもし、このことがNGでしたら即削除いたしますのでその点もご指摘下さい。
いつもお世話になってありがとうございます。よろしくお願い致します。