QooQカスタマイズ調査中 Font Awesome のアイコンを使用を勧めるサイトが多くありました、QooQに限らずいろいろなサイトで使われている Font Awesome のアイコン かなりメジャーなアイコンのようです。
灰色うさぎも使おう♪その前に、ちょっとだけ遊んでみます。
今回参考にした記事は colissさんのサイト
2020年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ
チョット悩ましかったのが、ライセンス
殆どのサイトがライセンスには触れず、特定のコードを埋め込んで使ってください。という感じでしたが、いろいろ調べたところ新しバージョンではライセンス契約が必要になったようです。
こちらのサイトに記載があります。
Font Awesome の使い方（ver5.9以降）
Font Awesome のバージョン 5.9 以降を利用するにはメールアドレスを登録してアカウントを作成する必要があります。いろいろ悩ましいのですが、古いバージョンはなくなるようですので 新しいバージョンで使ってみることにしました。
まずはライセンス契約、PRO仕様でない無料のアイコンだけ使うのですが、ライセンス申請をします、ドキドキするわぁ英語だし(TдT)
colissさんのサイトに詳しく書いてあるので、無事にクリアできました。
ライセンス契約が済んだらまずは <head>部に自分用のライセンスコード <body>にもコメントをBloggerメニューのテーマ【HTML編集】で追加し アイコンを使う準備をします。（アニメーションを使うならもう一行追加 後で触れます。）
ここまでは、利用に際して一度だけ行えばOK ここからが実際の利用になります。
アイコンを使いたいところに、HTMLで以下のコードを埋め込みます。
<i class="fa fa-home "></i> これでホームアイコンが表示されます。
fa fa-home ここの部分を書き換えて、いろいろなアイコンを表示します。
使えるアイコンが多すぎて調べるのが大変です、検索もできるのですが無料アイコンを一覧にして使いやすくしているサイトがあったので ご紹介。
ピクセルラボさんのサイトです。
Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方
当座 使うかもしれないのは
ホーム パンケーキ 電話 メニュー リスト 注意 ヒント カテゴリー リンクアウト 御朱印帳 御朱印 訪問済み 車 御朱印帳
とかかな？１．Font Awesome アイコンのサイズ変更
<i class="fas fa-camera-retro fa-xs"></i>xsの指定を変えればxs,sm,lg,2x～10x だんだん大きくなるよ、分かり易ね。
プレビューしないと見えないんだね・・・・(￣▽￣;)
みなさん どのやって使ってるのかな？ 見えないのに、ヤマカン？
２．Font Awesome アイコンを回転する。
<i class="fas fa-snowboarding fa-rotate-90"></i>fa-rotate-180,fa-rotate-270,fa-flip-horizontal,fa-flip-vertical
non 90 180 270 横 縦 両方
３．Font Awesome アイコンの色を変える
<i class="fas fa-envelopet fa-3x" style="color: aqua;"></i>４．Font Awesome リストをオシャレに
<ul class="fa-ul"><li><span class="fa-li"><i class="fas fa-heart"></i></span>〇〇○</li>
<li><span class="fa-li"><i class="fas fa-heart"></i></span>〇〇○</li>
<li><span class="fa-li"><i class="fas fa-heart"></i></span>〇〇○</li>
</ul>
リスト表示したときの先頭に表示される ・
このつまらない ・ を fas fa-heart ハートなど好みのアイコンに変えて使います。
- チソン
- ジェミン
- ロンジュン
- ジェノ
- ヘチャン
- チョンロ
５．左寄席、右寄せ、幅固定
コーテーションをアイコンで表示するだけか<i class="fas fa-quote-left fa-lg fa-pull-left"></i>
<i class="fas fa-quote-right fa-lg fa-pull-right"></i>
let’s go 僕の汗のしずくは君に Heavy rain いつも Hot and shine ステージの上で Ride 君の目は心より先に反応する 今僕たちは熱気にあふれてる 楽に座って遊んであげる時間はない
<i class="fas fa-home fa-fw" style="background: black"></i> Home
<i class="fas fa-info fa-fw" style="background: black"></i> Info
Home
Info
↑↑が指定なし↓↓が固定幅
Home
Info
Info
↑↑が指定なし↓↓が固定幅
Home
Info
６．Font Awesome アイコンをアニメーションで
<i class="far fa-spinner fa-spin fa-5x"></i>アニメーション fa-spin、fa-pulse
これ以外のアニメーションを使うには 以下をhead部に予め埋め込みます。
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.min.css' rel='stylesheet' type='text/css'/>
<i class="fas fa-frog faa-wrench animated"></i>
faa-wrench、faa-ring、faa-horizontal、faa-vertical、faa-flash
animated-hoverも無事動作しました。
<i class="fas fa-kiwi-bird fa-2x faa-wrench animated-hover"></i>
wrench ring horizontal vertical flash
７．Font Awesome アイコンを重ねる
<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x" style="color: red;"></i>
</span>
お遊び完了、今後 ちょいちょい 使ってみたいと思います。
御朱印もいいけど、うさぎの絵馬も集まってきました。
どうもです。
返信削除Font Awesome について相当お調べにならられたようで感心しました(^^)
リストの使い方とか参考になりました。
Font Awesome の使い方（ver5.9以降）のリンク先が変になってますけどこちらですかね？
https://www.webdesignleaves.com/pr/plugins/fontawesome_03.html
私も結構前にアカウント登録済で JS/SVG 版を使っています。kit が不安定でアイコンが出ない時がたま～にあったので CDN を主に使ってますが…今は安定してるかな？
当方のブログでもいくつかの記事内で Font Awesome を使うように書いてますけど、まだ CDN でも利用できるし、アカウント登録に関する説明が面倒ということもあってついついそういう大事なことにも触れずにいる様な状況です(~_~;)…CDN が使えなくなったらちゃんと書くつもりです。
ウチではアニメーションは使うことはないですが、試しにテストしてみたら、全て問題なく表示されましたよ。
animated-hover はマウスカーソルを載せないと動きませんけど、載せてもダメでしたか？
fa-stack もちゃんと重なりましたよ。fa-inverse が抜けてるせいかも？
<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse" ></i>
</span>
記事の最後のところ、レイアウトがおかしくなっちゃってますので、タグとか確認してみてはどうでしょうか。
ご指摘ありがとうございます。
返信削除リンク先とHTMLのゴミでレイアウトが崩れていたのは修正しました。
ボーっとした頭で色々考えてトライしてみたところ 結局全部できました！！！
ありがとうございました、記事もちょいちょい辻褄合わせして修正しました。('◇')ゞ
マウスオーバーは、たぶん勘違いで 試した時にたまたま動かなかったとかそういう感じみたいで普通に動いてました。
アイコンを重ねる方は 結構いろいろ試して見たのですが、うちの環境がたまたま・・・・
改行をBRタグ使わずENTERでやっていたのと、fa-inverseの指定をしても反転せず白のままで
fa-inverse指定しても見えない！し、思ったように動かずで疑心暗鬼で諦めてた感じです。
動作すると信じてやれば どれもできたのかもしれません。気持ちの問題？？？
カラー表示して、改行に気を付けて 頑張りました。(￣▽￣;)