FontAwesomeのiconをulやliに使う方法

9658 ワード
Ruby Rails haml Sass Ruby テキストリンク

はじめに

某プログラミングスクールにてフリマアプリを作成する際にFontAwesomeのiconが□に文字化けして悩んだ事を記事にします！！

完成図

以下の様にしたい！

しかし色々調べてみると

FontAwesomeのiconをulやolのlist-styleに使いたくなることってありますよね？
残念ながら、list-styleに直接アイコンを使うことは出来ないのです・・・・

え！？

しかし似た様な事はできる様なので早速実践！！

show.html.haml
          .main__showMain__contentRight__topContent__itemBox__optionalArea
            %ul
              %li.optionalBtn.likeBtn#likeBtn
                %i.fas.fa-star   お気に入り 0

            %ul.optional
              %li.optionalBtn
                =link_to  '' do
                  %i.fa-flag.likeIcon 不適切な商品の通報
show.scss
          &__optionalArea {
            display: flex;
            justify-content: space-between;
            ul {
              margin: 10px 0 0;
              display: flex;
              list-style: none;
              .likeBtn {
                margin-right: auto;
                padding: 6px 10px;
                border-radius: 40px;
                color: #3CCACE;
                border: 1px solid #ffb340;
                i {
                  display: inline-block;
                  font: normal normal normal 14px/1 FontAwesome;
                  font-size: inherit;
                  text-rendering: auto;
                  -webkit-font-smoothing: antialiased;
                }
                i:before {
                  content:'\f005';
                  font-weight: 400;
                  font-family: "Font Awesome 5 Free";
                }
              }
            }
            .optional {
              margin: 10px 0 0;
              display: flex;
              .optionalBtn {
                font-size: 14px;
                a {
                  padding: 6px 10px;
                  display: inline-block;
                  border-radius: 4px;
                  color: #333;
                  border: 1px solid #333;
                  text-decoration: none;
                  i {
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;
                    text-rendering: auto;
                    -webkit-font-smoothing: antialiased;
                  }
                  i:before {
                    content:'\f024';
                    font-weight: 400;
                    font-family: "Font Awesome 5 Free";
                  }
                }
              }
            }
          }

ポイントのなる所

show.scss
            ul {
              list-style: none;  　　　　　　←これ
            }
              i:before {
                  content:'\f005';　　　　　　　　　　　　　←これ
                  font-weight: 400;　　　　　　　　　　　　　←これ
                  font-family: "Font Awesome 5 Free";　　　←これ
                }

これで□に文字化けせずに表示できる様になりました！！

最後まで見て頂きありがとうございます！！

この記事が少しでも参考になれば嬉しいです

参考記事