Move fontAwesome 6 icon to the right

236 Views Asked by timemachine11 At 02 July 2022 at 19:13

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>

Original Q&A

There are 2 best solutions below

dippas On 02 July 2022 at 19:21 BEST ANSWER

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>

tacoshy On 02 July 2022 at 19:22

You need to apply the text-align to the wrapping element:

#icon-wrapper {
  text-align: right;
}

<head>
  <script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="icon-wrapper">
    <i class="fa-solid fa-cart-shopping"></i>
  </div>
</body>

Move fontAwesome 6 icon to the right

There are 2 best solutions below

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

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

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-AWESOME

Related Questions in FONT-AWESOME-6

Trending Questions

Popular # Hahtags

Popular Questions

Move fontAwesome 6 icon to the right

There are 2 best solutions below

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

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

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-AWESOME

Related Questions in FONT-AWESOME-6

Trending Questions

Popular # Hahtags

Popular Questions

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

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