Сделать Font Awesome иконки по кругу?


134

Я использую шрифт awesome в каком-то проекте, но у меня есть кое-что, что я хочу сделать со шрифтами awesome icons, я могу легко назвать значок следующим образом:

<i class="fa fa-lock"></i>

Возможно ли, чтобы все иконки всегда были в круглом круге с рамкой? Как то так у меня есть картинка:

введите описание изображения здесь

С помощью

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

Будет ли эффект, но проблема в том, что значки всегда больше, чем текст или элемент рядом, какие-либо решения?

Ответы:


175

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>


JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/


6
Есть что-то, но не круг?
Шнайдер

border-radiusДолжен обогнуть элемент. Какой браузер вы используете? будет обновлять мой ответ с префиксами
Nico O

4
Но это не решение. Это работает, только если iимеет содержание. Обычно с FA у вас нет содержимого внутри i-тега, но иконка визуализируется CSS позже: <i class="fa fa-lock"></i>и это именно то, о чем действительно просил @Schneider.
января

@ Ян, я буду расследовать это завтра. Но я не вижу проблемы. Вы правы, что у тегов нет контента, но контент будет добавлен через css. Даже если иконка не загрузится, вы увидите круг. Можете ли вы сделать jsFiddle проблемы, которую вы видите с ответом?
Нико О

4
Нет. Это ответ на вопрос. Смотрите изображения вопроса. Есть тень, а не жесткий круг.
Нико О

230

С Font Awesome вы можете легко использовать сложенные значки, как это:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

см. Font Awesome Stacked Icons

Обновление: - скрипка для сложенных иконок


6
Сложенные значки работают только до 2x. Если вы хотите большего, это не сработает,
Джей Ли

15
если бы это был принятый ответ, это «правильный» способ сделать это с помощью fontawesome. Принятый ответ - это хитрость, которая плохо адаптируется.
ask_io

4
То же самое с числами<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
m3nda 06

2
@emrah - это единственный вариант, который действительно великолепен, а не настраивается css, поэтому он более точен, чем что-либо здесь.
ask_io 06

1
Очень элегантное решение. @mmativ, если вы имеете в виду цвет фона на круге, вы просто делаете <i class = "fa fa-circle-thin fa-stack-2x" style = "color: blue"> </i>
J.Kirk.

34

Для этого не нужны трюки css или html. Font Awesome встроил для этого класс - fa-circle. Чтобы сложить несколько значков вместе, вы можете использовать класс fa-stack в родительском div.

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// И теперь у нас есть иконка facebook внутри круга :)


2
Сампат Бадхе сказал в своем ответе то же самое более двух лет назад. Почему бы тебе не прочитать другие ответы перед тем, как написать свой?
Тарас Яремкив

эй, извините за Сампата, я не видел его ответа, я попытаюсь изменить свой ответ и добавить больше решений или полезной информации.
Василий Гутник

1
Это хорошее решение, но оно дает синий фон каждому значку. Любая работа?
Джамшайд Камран

@CodeIt Просто используйте css, чтобы очистить его или добавить новый цвет фона. Это не должно быть проблемой.
Василий Гутник 02

27

Значок шрифта в круге, используемый emв качестве базового измерения

если вы используете ems для измерений, в том числе line-height, font-sizeи border-radius, text-align: centerчто делает вещи довольно прочными:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

13

Обновление: лучше использовать flex.

Если вам нужна точность, это то, что вам нужно.

Скрипки. Играй -> http://jsfiddle.net/atilkan/zxjcrhga/

Вот HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Вот CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

Радоваться, веселиться


добавление выравнивания текста: центр; Заставляет работать практически со всем, даже с fa-info
Marcio

как насчет вертикального выравнивания?
localhoost,

9

Вы тоже можете это сделать. Я хотел добавить кружок вокруг своих иконок icomoon. Вот код

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

8

ОБНОВЛЕНИЕ :

Изучив недавно flex, есть более чистый способ (без таблиц и меньше css). Установите оболочку как display: flex;и для центрирования ее дочерних элементов, присвойте ей свойства align-items: center;(вертикальное) и justify-content: center;(горизонтальное) центрирование.

См. Обновленную скрипку JS.


Странно, что этого раньше никто не предлагал .. Я всегда использую для этого таблицы.
Просто сделайте обертку display: tableи поместите материал по центру внутри нее text-align: centerдля горизонтального и vertical-align: middleвертикального выравнивания.

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

и какая-то дерзость вроде этого

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

или посмотрите этот JS Fiddle


Он очень красивый, чистый и маленький! Вот скрипка с CSS вместо SCSS jsfiddle.net/bqtkmy0s
Summsel

@summsel разве это не точная то же самое , как мой оригинальный ответ? Вы просто написали код в scss, а не css.
nclsvh

Да, конечно. Я пробовал ваше решение в css, и есть много людей, предпочитающих css. Так почему бы не опубликовать jsfiddle этой css-версии.
Summsel

5

Это подход, который вам не нужно использовать padding, просто установите heightи widthдля aи позвольте flexручке margin: 0 auto.

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>


4

Пример ниже не совсем сработал для меня, это версия, которую я заставил работать!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

3

попробуй это

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

2

Иконки Font Awesome вставляются как: до. Поэтому вы можете стилизовать свой i или что- то подобное:

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

2

Вы можете просто получить круглый значок с помощью этого кода:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Теперь ваш CSS будет:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

0

Мне нравится ответ Дэйва Эверитта с «высотой строки», но он работает только путем указания «высоты», а затем мы должны добавить «! Important» к высоте строки ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Line-height решал эту
проблему

Добавление !important- это пластырь, а не решение. Это означает, что у вас есть другое свойство CSS где-то еще, переопределяющее ваше свойство.
TylerH

0

Это лучшее и самое точное решение, которое я нашел на данный момент.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.