カテゴリー
ホームページ製作

font awesomeで疑似要素だと表示されない

bootstrap4.1で、昨日までのエラー処理。
一つは、navbarの文字色の件で、
<ul class=”nav”>が間違いで、正解は<ul class=”navbar-nav”>だった。

もう一つ、navbarの挙動がページによって違う件で、
jquery-3.3.1.slim.min.jsとpopper.min.jsとbootstrap.min.jsがページによって正しく指定されていなかった。

bootstrap4.1で、今日嵌まったところ。
font awesomeで疑似要素だと表示されない件。
fa-chevron-rightだと表示されるのに、fa-twitterだと表示されなかった。


fa-chevron-rightでは、
.site::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
}
で
  font-family: "Font Awesome 5 Free";
を書き、
fa-twitterでは、
.site::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f105";
  font-weight: 400;
}
で
  font-family: "Font Awesome 5 Brands";
と書かなければならなかった。

【参考サイト】
https://niwaka-web.com/fontawsome5_css/

font-weightばかり気をとられ嵌まったな。

カテゴリー
ホームページ製作

ul,liでbootstrapのwebアイコンを利用する方法

ul,liでbootstrapのwebアイコンを利用するときは、下記リンクを参照のこと

【参考サイト】
https://h2ham.net/font-awasome/

下記のように使う


 <ul class="fa-ul">
  <li><i class="fa fa-chevron-circle-right fa-li"></i>あああ</li>
 </ul>