Сделать шрифт Удивительные значки в круге?

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

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

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

Используя

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

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

Ответ 1

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>

Ответ 2

С помощью Font Awesome вы можете легко использовать уложенные иконки следующим образом:

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

отсылайте Шрифт Awesome Stacked Icons

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

Ответ 3

Для этого вам не нужны css или html трюки. Font Awesome построил для него класс - fa-stack

<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 внутри круга:)

Ответ 4

если вы используете 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 */
}

Ответ 5

Обновление: скорее используйте flex.

Если вы хотите точности, это путь.

Скрипки. Go Play → 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;
}

Повеселись

Ответ 6

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

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

Ответ 7

Это подход, который вам не нужно использовать 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>

Ответ 8

ОБНОВЛЕНИЕ:

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

Смотрите этот обновленный JS Fiddle

Странно, что никто не предлагал этого раньше... Я всегда использую таблицы для этого.
Просто сделайте, чтобы у обертки был 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

Ответ 9

Нижеприведенный пример не работал у меня, это версия, которую я сделал!

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

Ответ 10

попробуйте это

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

Ответ 11

Шрифт Удивительные значки вставляются как: раньше. Поэтому вы можете создать либо i, либо a:

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

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

Ответ 12

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

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

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

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

Ответ 13

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

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