Поместите значок Font Awesome в верхнем правом углу - PullRequest
Новая
       6

Поместите значок Font Awesome в верхнем правом углу

0 голосов
/ 16 апреля 2020

Я хочу поставить 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>

Ответы [ 4 ]

0 голосов
/ 16 апреля 2020

Я внес некоторые изменения в Ответ Пенни Лю с выше. но все же я не уверен, будет ли это работать на вкладке. 

.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>
0 голосов
/ 16 апреля 2020

Чтобы значок отображался только для активной кнопки, вам нужно будет скрыть значок по умолчанию, а затем передать класс кнопке, чтобы значок отображался, когда необходимо активировать некоторые javascript или jquery .

Приведенный ниже код показывает, что класс active добавил кнопку, CSS был обновлен, чтобы скрыть значок, пока класс active не будет добавлен к кнопке.

Надежда это помогает. 

<!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>
0 голосов
/ 16 апреля 2020

Я думаю, это то, что вы ищете: 

.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>
0 голосов
/ 16 апреля 2020

Вы можете установить btn1 на position: relative

А затем для иконки выполните 

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

ie -> 

.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>
...