[RUBY] So verwenden Sie das Font Awesome-Symbol für ul und li

Einführung

Ich werde einen Artikel darüber schreiben, dass das Symbol von Font Awesome in □ beim Erstellen einer Frima-App an einer bestimmten Programmierschule verstümmelt wurde! !!

Abschlusszeichnung

Ich möchte folgendes tun!

Als ich es jedoch nachschlug

Manchmal möchten Sie das Symbol von Font Awesome für den Listenstil von ul und ol verwenden, oder? Leider können Sie Symbole nicht direkt im Listenstil verwenden ...

e! ??

Es scheint jedoch, dass ähnliche Dinge getan werden können, also üben Sie sofort! !!

show.html.haml

          .main__showMain__contentRight__topContent__itemBox__optionalArea
            %ul
              %li.optionalBtn.likeBtn#likeBtn
                %i.fas.fa-Stern Favorit 0
                               
            %ul.optional
              %li.optionalBtn
                =link_to  '' do
                  %i.fa-flag.likeIcon Unangemessene Produkte melden

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";
                  }
                }
              }
            }
          }

Wo die Punkte sind

show.scss

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

Jetzt können Sie es in □ ohne verstümmelte Zeichen anzeigen! !!

Danke, dass du bis zum Ende zugesehen hast! !!

Ich hoffe, Sie fanden diesen Artikel hilfreich: pray_tone2:

Referenzartikel

https://qiita.com/ryounagaoka/items/0f7e81d703761b3e3e77