0

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
timemachine11
  • 11
  • 1
  • and icon inside the head element would be invalid. The head element is only for specific tags such as `script`, `link`, `meta`, `title` ... The icon belongs into the body element and can then be aligned with text-align of the wrapping element – tacoshy Jul 02 '22 at 19:16

2 Answers2

2

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
0

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>
tacoshy
  • 10,642
  • 5
  • 17
  • 34