以前、「font awesome の icon を設置した」で、 font awesome の icon を ul や ol の list-style に使うためには、
li:before {
font-family: FontAwesome;
content: 'f073'; /* icon unicode */
}
と記述すればよい、と書いたが、今回、サイトの ssl 対応をしているうちに、なぜか、この方法で表示できていたアイコンが、表示できなくなっていた。
サイトの ssl 対応が原因かどうかは不明だ（もしかして、知らないうちに既にそうなっていたのかも知れない。）が、このままでは困るので、試行錯誤した。
「Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合」を参考に、 font-family を変更し、
li:before {
font-family: "Font Awesome 5 Free";;
content: 'f073'; /* icon unicode */
}
と、記述することで表示できた。
ただし、一部のアイコンは、これだけでは表示されず、追加で、
font-weight: bold;
も記述する必要があった。 font awesome のフリー版が regular, light, brands には対応しておらず bold のみであることが原因ではないかと思うが、詳細は不明。
この記事のリンク用URL＆トラックバックURL : https://red-souls.jp/ichounoki/rnote/works/software/20201121_143056562963.htm
キーワード: font awesome icon blog parts