将 Font Awesome 图标放在右上角

Question

我想把 fa-circle 放在顶角。基本上，我正在寻找的是将 fa-circle 定位到右上角（仅适用于活动按钮）。

.btn1 {
  background-color: grey;
  border: none;
  color: white;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
}

.fa.fa-circle {
  color: darkorange;
  font-size: 0.25em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn1"><i class="fa fa-circle pull-right"></i>Active</button>

Answer 1

您可以将 btn1 设置为 position: relative

然后对于图标，执行

position: absolute;
right: 0;
top: 0;

即 -->

.btn1 {
  background-color: grey;
  border: none;
  color: white;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}

.fa.fa-circle{
  color:darkorange;
  font-size: 0.25em;
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px 5px 0 0;
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>


<button class="btn1"><i class="fa fa-circle pull-right"></i>Active</button>

</body>

Answer 2

要使图标只显示活动按钮，您必须默认隐藏图标，然后将 class 传递给按钮，以便在需要使用一些 javascript 或 jquery.

下面的代码显示 active class 添加了按钮，CSS 已更新为隐藏图标，直到 active class附加到按钮。

希望对您有所帮助。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Add icon library -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      .btn1 {
        /*  background-color:#f5e0f9;*/
        background-color: grey;
        border: none;
        color: white;
        padding: 10px 12px;
        font-size: 14px;
        cursor: pointer;
      }
      .btn1 .fa {
        display: none;
      }
      .btn1.active .fa.fa.fa-circle {
        display: block;
      }
      .fa.fa-circle {
        color: darkorange;
        font-size: 0.25em;
      }
    </style>
  </head>
  <body>
    <button class="btn1 active">
      <i class="fa fa-circle pull-right"></i>Active
    </button>
  </body>
</html>

Answer 3

我想这就是您要找的：

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  background-color: grey;
  color: white;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
}

.active::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f111";
  color: darkorange;
  font-size: .7em;
  top: 0em;
  right: 0em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn active">Active</button>
<button class="btn">Button</button>

Answer 4

我对上面的做了一些修改。但我仍然不确定它是否会在选项卡中工作。

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  background-color: grey;
  color: white;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
}

.active:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f111";
  color: darkorange;
  font-size: .35em;
  top: 0.35em;
  right: 0.25em;
  /*z-index: 1;*/
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn active">Active</button>
<button class="btn">Button</button>

将 Font Awesome 图标放在右上角

Put Font Awesome icon in top right corner

html

javascript

css

font-awesome