Fontawesome 5 Guideline

• Short note of https://fontawesome.com/how-to-use/svg-with-js
• <i class="fab fa-apple fa-xs"></i>
• fa are not used in fontawesome 5. Instead of fa now use four different styles.
• Style prefix
• fas - solid
• far - regular
• fal - light[ not free pro]
• fab - brands
• Size
• fa-xs : .75em (12px)
• fa-sm : .875em (14px)
• fa-lg : 1.33em+vertical-align: -25% (21.28px)
• fa-2x - fa-10x : 2em - 10em (32px-160px)
• Fixed width
• <div><i class="fab fa-apple fa-fw" ></i> Apple</div>
• Special class .fa-inverse
• Doing opposite color.
• List ul and li bullets remove.
• <ul class="fa-ul">
    <li><span class="fa-li"><i class="fab fa-apple fa-xs"></i></span>List icons</li>
  </ul>
• I don't use in Bootstrap.
• Fixed width
• <i class="fab fa-apple fa-fw"></i>
• Border Icon
• <i class="fas fa-quote-left fa-border"></i>
• Pull left/right
• <i class="fas fa-quote-left fa-pull-left/right"></i>
• Pulse (Animation)
• <i class="fas fa-spinner fa-pulse"></i>
• Spin (Animation)
• <i class="fas fa-circle-notch fa-spin"></i>
• <i class="fas fa-spinner fa-spin"></i>
• <i class="fas fa-sync fa-spin"></i>
• <i class="fas fa-cog fa-spin"></i>
• Use display:block if facing problem.
• Shrink
• <i class="fas fa-magic" data-fa-transform="shrink-10" ></I>
• Per unit 0.96px.
• shrink-0 means 100% size.
• shrink-16 means vanish.
• Up/left/down/right use for movement. Zero for middle. 
• <i class="fas fa-magic" data-fa-transform="shrink-8 up-5"></i>
• Grow
• <i class="fab fa-apple" data-fa-transform="grow-6"></i>
• Rotate
• Units are degree.
•  <i class="fas fa-magic" data-fa-transform="rotate-30" ></i>
•  <i class="fas fa-magic" data-fa-transform="rotate--30" ></i>
• Flip
• <i class="fas fa-magic" data-fa-transform="flip-v"></i>
    <i class="fas fa-magic" data-fa-transform="flip-h"></i>
    <i class="fas fa-magic" data-fa-transform="flip-v flip-h"></i>
• Only two icons (masking)
• Inner icon attributes
• class
• data-fa-transform for shrink or grow
• Outer icon attributes
• data-fa-mask
• <i class="fab fa-twitter fa-4x" data-fa-transform="shrink-10" data-fa-mask="fas fa-circle"></i>
• <i class="fab fa-facebook-f fa-4x" data-fa-transform="shrink-8 up-.1" data-fa-mask="fas fa-circle"></i>
• More than two icons (layer)
• Facilities
• Custom text
• Custom counter
• More than two icons
• Required Classes
• fa-layers + fa-fw
• wrap text or icons
• fa-layers-text
• Add text combine with data-fa-transform for shrink or move
• fa-layers-counter
• Counter number with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right classes.
• You can use CSS Pseudo-elements when you have no option.
• How change font color size and other css properties?
• There are several ways but I use external css. Like .myClass svg{color:pink;}