How to use Font Awesome icon for ul and li

Introduction

I will write an article about the fact that Font Awesome's icon was garbled in □ when creating a flea market app at a certain programming school! !!

Completion drawing

I want to do the following!

Image from Gyazo

However, when I looked it up

Sometimes you want to use Font Awesome's icon for ul and ol's list-style, right? Unfortunately, you can't use icons directly in list-style ...

e! ??

However, it seems that similar things can be done, so practice immediately! !!

show.html.haml


          .main__showMain__contentRight__topContent__itemBox__optionalArea
            %ul
              %li.optionalBtn.likeBtn#likeBtn
                %i.fas.fa-star favorite 0
                               
            %ul.optional
              %li.optionalBtn
                =link_to  '' do
                  %i.fa-flag.likeIcon Report inappropriate products

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

Where the points are

show.scss


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

Now you can display it in □ without garbled characters! !!

Thank you for watching till the end! !!

I hope you found this article helpful: pray_tone2:

Reference article

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

Recommended Posts

How to use Font Awesome icon for ul and li
How to use StringBurrer and Arrays.toString.
[Rails] How to install Font Awesome
How to use EventBus3 and ThreadMode
[Rails] How to install Font Awesome
Procedures for passing RealmObject to Fragment and how to use Parceler
How to use \ t Escape sequences different for mac and Windows-java
How to use binding.pry for view files
How to use OrientJS and OrientDB together
[Ruby] How to use slice for beginners
How to use substring and substr methods
How to use @Builder and @NoArgsConstructor together
How to insert icons using Font awesome
(For beginners) [Rails] Time saving tech! How to install and use slim
[Java] How to use FileReader class and BufferedReader class
[Ruby] How to use gsub method and sub method
How to use an array for HashMap keys
How to use Segmented Control and points to note
How to use scope and pass processing (Jakarta)
[Rails] How to use Gem'rails-i18n' for Japanese support
How to use nginx-ingress-controller with Docker for Mac
[For super beginners] How to use autofocus: true
[Java] How to use Calendar class and Date class
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use java.util.logging
How to use map
How to use Twitter4J
How to use active_hash! !!
How to use hidden_field_tag
[How to use label]
How to use identity
How to use hashes
How to use JUnit 5
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
How to use an array for a TreeMap key
How to use Truth (assertion library for Java / Android)
[For those who create portfolios] How to use font-awesome-rails
How to use RealSense with ubuntu 20.04 and ROS Noetic
How to use and apply Java's JFrame / Canvas class
How to use GitHub for super beginners (team development)
Explanation of Ruby on rails for beginners ④ ~ Naming convention and how to use form_Tag ~
[Java] How to use Map
How to use Chain API
[Java] How to use Map
How to use Priority Queuing
How to use SAS tokens for Azure Event hubs (Java)
How to use OpenCV 4 on Android and view camera live view
[Must-see for apprentice java engineer] How to use Stream API
[Rails] How to use enum
How to use java Optional
How to use JUnit (beginner)
How to use Ruby return
[Rails] How to use enum
How to use @Builder (Lombok)