トップページ > 記事閲覧
【雑談】Font Awsome アイコン使用の留意点
投稿日 | : 2021/01/15(Fri) 23:26 |
投稿者 | : Yujiro |
参照先 | : |
Font Awsome で提供されているアイコンの内、HAIKで表示できないものがあります。
が、それを解消する方法を紹介します。
(HAIK Ver 7.3.7)
===============
プラグイン
&icon(fa,アイコン名);
===============
これで Font Awsome に用意されいるアイコンをフォントとして表示できることになっています。
HAIKマニュアル該当ページ
http://manual.haik-cms.jp/index.php?icon
Font Awsomeのアイコンページ
https://fontawesome.com/icons
しかし、そこで選んだアイコンのタイプによっては HAIK7.3.7 で表示不可な物があります。
例えば・・・
&icon(fa,cat);
これは表示不可。
ちなみに
&icon(fa,paw);
は表示可能。
そこでわからないながらに原因を探り、今のところ以下の解決方法を見出しました。
===============
書き換えファイル
plugin > icon.inc.php
===============
このファイルの76、77行目にある
v5.1.0 を
v5.6.1 に書き換えます。
ま、これはこれでなんとかですが、HAIKのVerUpがあるたびに自己管理が必要な
ファイルが増えて面倒ですね。(VerUpもうないか・・・)
今回のトラブル解消の参考にしたページ
https://solabo.blog/fontawesome-error/
どうやら、デザインが新しめのアイコンは使用するCSSのVerに新しい物を要求する感じ。
なお、私がこれらアイコンの表示技術について熟知しているわけではありません。
全部手探りと実験によって得られたものです。ほぼヤマカン。
(ですので詳しいことを聞かないでくださいね)
Re: 【雑談】Font Awsome アイコン使用の留意点
投稿日 | : 2021/02/22(Mon) 16:16 |
投稿者 | : Yujiro |
参照先 | : |
面白い応用編を発見
『ソリッドとレギュラーの使い分け』
簡単!
=====
Font Awsomeのアイコンページ
https://fontawesome.com/icons
ここにあるアイコンは以下の記述でHAIKに表示できます。(とマニュアルにある)
&icon(fa,アイコン名);
=====
ところで、多くのアイコンは同じ名前で「ソリッドタイプ」と「レギュラータイプ」が
用意されています。
(Font Awsomeにおいて)
ソリッドは塗りつぶし的デザイン。レギュラーは中抜き的デザイン。
これらを使い分ける方法を解説します。Font Awsomeに用意されてさえいれば使い分け
できます。
記述方法
&icon(fas,アイコン名); ← ソリッドタイプ &icon(fa,アイコン名); も同じ
&icon(far,アイコン名); ← レギュラータイプ
注目するのはアイコン名の前『fa』の部分です。
マニュアルのデフォではフラグが "fa" ですが、これは勝手にソリッドタイプが選択
されます。(それ以上の説明なし)
これを "far" と書けばレギュラータイプの表示となります。
添付画像では以下の通りの記述です。同じアイコン名で使い分けできます。
&deco(#AAAAAA,,7em){&icon(fas,file-alt); &icon(far,file-alt);};
Font Awsome 該当ページ
https://fontawesome.com/icons/file-alt?style=solid
Re: 【雑談】Font Awsome アイコン使用の留意点
投稿日 | : 2021/01/31(Sun) 22:57 |
投稿者 | : tomzo |
参照先 | : |
Yujiroさん
この新しいアイコンが表示できないかなあ。
と思っていましたがHAIKのバージョンアップも望めないため
あきらめていました。
この方法で表示できるなら、使ってみる価値はありますね。
情報提供ありがとうございます。
Re: 【雑談】Font Awsome アイコン使用の留意点
投稿日 | : 2021/01/22(Fri) 22:07 |
投稿者 | : Yujiro |
参照先 | : |
うみほしさん
検証ありがとうございます。
Re: 【雑談】Font Awsome アイコン使用の留意点
投稿日 | : 2021/01/18(Mon) 20:00 |
投稿者 | : うみほし |
参照先 | : http://umihoshi.com |
さっそく試してみました。
ちゃんと表示できました!