Move fontAwesome 6 icon to the right-CodePudding

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 ></i>
</head>

CodePudding user response：

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 ></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 ></i>

CodePudding user response：

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 ></i>
  </div>
</body>

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;

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;`