如何将 Font Awesome 图标向右对齐？答案

【问题标题】：How do I align Font Awesome icons to the right?如何将 Font Awesome 图标向右对齐？
【发布时间】：2022-01-20 00:23:10
【问题描述】：

我正在我的 CSS 中尝试 text-align: right，但 text-align 出于某种原因没有移动它。我希望网站标题左对齐，图标右对齐在同一行。这是我正在尝试的。

JS Fiddle

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container">
    <h2>Website Title</h2>

    <i class="fas fa-bars"></i>
</div>

CSS

body {
  margin: 0;
}

.top-container {
    padding: 20px;
    margin: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    font-size: 2em;
    font-weight: bold;
}

.top-container i {
    color: red;
    display: inline-block;
    text-align: right;
}

.top-container h2 {
    display: inline-block;
}

h2 {
  margin-top: 10px;
}

【问题讨论】：

Align two inline-blocks left and right on same line的可能重复
尝试输入<div class="top-container" style=" text-align: right;>
只需将 float:right 添加到 i 元素
附带说明一下，一旦添加了可能与三栏图标一起使用的导航，您将遇到其他问题... :)跨度>

标签： html css font-awesome

【解决方案1】：

text-align 将对齐文本 within 您分配给它的元素，这在 inline-block 这样的元素中不会做任何事情（因为它和它的内容一样宽)。使用float: right; 而不是text-align: right

https://jsfiddle.net/s4a9sct9/1/

【讨论】：

【解决方案2】：

如果text-align: right 不起作用，请尝试float: right。

【讨论】：

【解决方案3】：

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.top-container {
  position: relative;
  background: #eaeaea;
  width: 100%;
  padding: 30px;
}

.top-container.float-style>h2 {
  display: inline;
}

.top-container.float-style>i {
  float: right;
  line-height:26px; 
}
.top-container.absolute-style > i {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container float-style">
  <h2>Website Title float style</h2>
  <i class="fas fa-bars"></i>
</div>

<hr style="margin:30px 0px;">
<div class="top-container absolute-style">
  <h2>Website Title absolute</h2>
  <i class="fas fa-bars"></i>
</div>

【讨论】：

【解决方案4】：

为元素创建一个自定义 ID --> <i class="fal fa-phone" id="customfa"></i>
前往你的 CSS 文件并修改这些 -->

#customfa{右：10%;} 您可以使用 right、left、top 和 bottom 属性。

【讨论】：

【解决方案5】：

可以使用 pull-right 或 align-right 或 float-right

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

    <a class="btn btn-default" href="#">
        <i class="fa fa-align-right" title="Align Right"></i>
      </a>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。