Faça ícones impressionantes da fonte em um círculo?


134

Estou usando a fonte awesome em algum projeto, mas tenho algumas coisas que quero fazer com ícones impressionantes da fonte, posso chamar facilmente um ícone como este:

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

É possível que todos os ícones estejam sempre em círculo redondo com borda? Algo assim, eu tenho uma foto:

insira a descrição da imagem aqui

Usando

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

Isso causará o efeito, mas o problema é que os ícones são sempre maiores que o texto ou o elemento ao lado, alguma solução?

Respostas:


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 da resposta antiga: http://fiddle.jshell.net/4LqeN/


6
Tem algo, mas não um círculo redondo?
Schneider

O border-radiusdeve arredondar o elemento. Qual navegador você usa? atualizou minha resposta com prefixos
Nico O

4
Mas isso não é uma solução. Isso só funciona se itiver conteúdo. Geralmente, com a FA, você não tem conteúdo na tag i, mas o ícone é renderizado pelo CSS posteriormente: <i class="fa fa-lock"></i>e é isso que o @Schneider realmente pediu.
Janeiro

@ Jan vou investigar isso amanhã. Mas não consigo ver um problema. Você está certo, que as tags não têm conteúdo, mas o conteúdo será adicionado via css. Mesmo quando o ícone falha ao carregar, você vê um círculo. Você pode criar um jsFiddle of a Problem que vê com a resposta?
Nico O

4
Não. Esta é a resposta para a pergunta. Veja as imagens da pergunta. Há uma sombra, não um círculo rígido.
Nico O

230

Com o Font Awesome, você pode facilmente usar ícones empilhados como este:

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

consulte Font Awesome Stacked Icons

Atualização: - Violino para ícones empilhados


6
Os ícones empilhados funcionam apenas até 2x. Se você quiser maior do que isso, ele não funciona
J Lee

15
gostaria que essa fosse a resposta aceita, é a maneira "correta" de fazer isso com fontawesome. A resposta aceita é um hack que não se ajusta bem.
asked_io

4
O mesmo <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>
acontece

2
@emrah - é a única opção aqui que é realmente impressionante, não CSS personalizado, por isso é mais preciso do que qualquer coisa aqui.
asked_io

1
Solução muito elegante. @mmativ se você quer dizer uma cor de fundo sobre o círculo que você simplesmente fazer <class i = estilo "fa-fa-fa círculo thin-stack-2x" = "color: blue"> </ i>
J.Kirk.

34

Você não precisa de truques de css ou html para isso. Font Awesome foi construído em classe para isso - fa-circle Para empilhar vários ícones, você pode usar a classe fa-stack na div pai

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

// E agora temos o ícone do facebook dentro do círculo :)


2
Sampat Badhe disse em sua resposta o mesmo há mais de 2 anos. Por que você não lê outras respostas antes de escrever as suas?
Taras Yaremkiv

ei, desculpe Sampat, não o vi responder, tentarei modificar minha resposta e adicionar mais soluções ou informações úteis.
Vasyl Gutnyk

1
É uma boa solução, mas fornece um plano de fundo azul para cada um dos ícones. Alguma solução?
Jamshaid Kamran 01/10/19

@ CodeIt Basta usar css para limpá-lo ou adicionar nova cor de fundo. Não deve ser um problema.
Vasyl Gutnyk

27

Ícone da fonte em um círculo usando emcomo medida básica

se você usar o ems para as medidas, incluindo line-height, font-sizee border-radius, com text-align: centerisso, torna as coisas bastante sólidas:

#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

Atualização: use o flex.

Se você quer precisão, este é o caminho a percorrer.

Violino. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/

Aqui está o 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>

Aqui está o 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;
}

Diverta-se


adicionando alinhamento de texto: centro; Faz o trabalho com praticamente tudo, mesmo fa-info
Marcio

que tal alinhamento vertical?
localhoost

9

Você também pode fazer isso. Eu queria adicionar um círculo em volta dos meus ícones icomoon. Aqui está o código.

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

8

ATUALIZAÇÃO :

Após aprender o flex recentemente, há uma maneira mais limpa (sem tabelas e menos CSS). Defina o wrapper como display: flex;e para centralizar seus filhos, forneça as propriedades align-items: center;para justify-content: center;centralização (vertical) e (horizontal).

Veja este JS Fiddle atualizado


Estranho que ninguém tenha sugerido isso antes .. Eu sempre uso tabelas para fazer isso.
Basta fazer com que um invólucro tenha display: tablee centralize as coisas dentro dele para alinhamento text-align: centerhorizontal e vertical-align: middlevertical.

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

e algum atrevido assim

.wrapper{
  display: table; 

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

}

ou veja este JS Fiddle


Este é muito agradável, limpo e pequeno! Heres um violino com CSS em vez de SCSS jsfiddle.net/bqtkmy0s
summsel 15/06

@ summsel não é exatamente a mesma coisa que a minha resposta original? Você acabou de escrever o código em scss e não em css.
nclsvh

sim, claro que é. Eu tentei sua solução em css e há muitas pessoas por aí preferindo css. Então, por que não postar o jsfiddle desta versão css.
summsel

5

Esta é a abordagem que você não precisa usar padding, basta definir heightoe widthpara ae deixar o flexmanuseio 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

O exemplo abaixo não funcionou muito bem para mim, esta é a versão que eu fiz funcionar!

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

tente isso

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

Fonte Os ícones impressionantes são inseridos como: antes. Portanto, você pode estilizar quer o seu i ou um assim:

.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

Você pode simplesmente obter o ícone redondo usando este código:

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

Agora seu CSS será:

.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

Gosto da resposta de Dave Everitt com a «altura da linha», mas só funciona especificando a «altura» e, em seguida, temos de adicionar «! Importante» à altura da linha ...

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

A altura da linha estava resolvendo isso para mim
mecograph

Adicionar !importanté um band-aid, não uma solução. Isso significa que você tem outra propriedade CSS em outro lugar, substituindo sua propriedade.
TylerH

0

Esta é a melhor e mais precisa solução que encontrei até agora.

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;
    }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.