の課題2つの内の1つ Font Awesome 5アイコン表示については解決(後述)
残る課題は **予約フォームで、レイアウト崩れ(選択プルダウンの時分欄)。
これはcssが当たっていないだけの様だけど、css名がわからない**こと
-----------------------
Font Awesome 5アイコン表示については、共有したいのでお知らせします。
最大の問題だったのは、
content: "\f0c9"の様に、<i class=“fa-solid fa-bars”>と<i class=“fa-regular fa-bars”>の様に、
FreeでSolidとRegularの2つが用意されているのにかかわらず、
この場合、Solidに合わせ、font-weight: 900;にしなければならなかったこと(400では表示されない)
これが、アイコンの1部は表示されているのに部分的に表示されていなかったこと。
これについては、"\f0c9"の様に、
1つづつ検索して、最初に表れるものがSolidなのかRegularなのかで、
font-weight: 900;にするか、font-weight:400;にするか
(結果論で最初に表示された方を選択することで解決)
つづいて、blockquoteで使っている、
content: “\f10d”; とcontent: “\f10e”; については、
共にfont-weight: 900;でなければアイコンが表示されないことが判明。
最後に残ったのが、
image-slider.lessで使っている
content: “\f32a”;(右 >)とcontent: “\f32b”;(左 <)
これら2つについては、
先の検索ではヒットせず、代替文字を探すことになった。
\f32a \f054 で<i class=“fa-solid fa-chevron-right”>
\f32b \f053 で<i class=“fa-solid fa-chevron-left”>
ーーーーーーーーー
もう一つ
main.less と
image-slider.less の最後にある
.fa,.fas {
font-family: “Font Awesome 5 Free” ;
font-weight: 900; }
ここは、900でなければ、
「ようこそ」のアイコンclass="fa fa-users fa-fw"や、
カスタマイズした、
<i class=“fa fa-angle-double-down”>目次に進む
<i class=“c_lime fa fa-cog fa-spin fa-2x”>⚙スピン、
<i class=“fa fa-arrow-up”>Topに戻る、
<i class=“fa fa-angle-double-up”>目次に戻る などが、表示されない
以上の結果になりました。
残り課題のフォームのレイアウト崩れが解消したら
v9.1.2でStucco使用に問題がないことに
なると思っています。