Search code examples
htmlcssfont-awesomefont-awesome-6

Move fontAwesome 6 icon to the right

I am trying to move this icon to the top right of the file, but I can't, does anyone know how? (I got this icon for free from fontAwesome)

Here's the code

i {
  text-align: center;
}
<head>
  <script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
  <i class="fa-solid fa-cart-shopping"></i>
</head>

Solution

  • Because fa-solid has display: inline-block by default (from this rule: display: var(--fa-display,inline-block) the text-align:right by itself won't work.

    Here are a few solutions:

    You can set the CSS vars --fa-display there is built in in font-awesome CSS and add text-align: right

    .fa-solid.fa-cart-shopping {
  --fa-display: block;
  text-align: right;
}
    <script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-cart-shopping"></i>

    If you like flex, you can use display: flex; justify-content: flex-end;

    .fa-solid.fa-cart-shopping {
  display: flex;
  justify-content: flex-end;
}
    <script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-cart-shopping"></i>