¿Hacer iconos de Font Awesome en un círculo?


134

Estoy usando Font Awesome en algún proyecto, pero tengo algunas cosas que quiero hacer con los iconos de Font Awesome, puedo llamar fácilmente a un icono como este:

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

¿Es posible que todos los íconos estén siempre en círculo con borde? Algo como esto, tengo una foto:

ingrese la descripción de la imagen aquí

Utilizando

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

Hará el efecto, pero el problema es que los íconos siempre son más grandes que el texto o elemento al lado, ¿alguna solución?

Respuestas:


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 de la respuesta anterior: http://fiddle.jshell.net/4LqeN/


66
¿Tienes algo, pero no círculo redondo?
Schneider

El border-radiusdebería redondear el elemento. ¿Qué navegador usas? actualizará mi respuesta con prefijos
Nico O

44
Pero esto no es una solución. Esto solo funciona si itiene contenido. Por lo general, con FA no tiene contenido dentro de la etiqueta i, pero CSS representa el icono más adelante: <i class="fa fa-lock"></i>y esto es lo que realmente solicitó @Schneider.
Jan

@ Jan Investigaré en eso mañana. Pero no puedo ver un problema. Tienes razón, que las etiquetas no tienen contenido, pero el contenido se agregará a través de CSS. Incluso cuando el ícono no se cargara, verías un círculo. ¿Puedes hacer un jsFiddle de un problema que ves con la respuesta?
Nico O

44
No. Esta es la respuesta a la pregunta. Ver las imágenes de la pregunta. Hay una sombra, no un círculo duro.
Nico O

230

Con Font Awesome puedes usar fácilmente iconos apilados 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 los iconos apilados de Font Awesome

Actualización: - Violín para iconos apilados


66
Los iconos apilados solo funcionan hasta 2 veces. Si quieres más grande que eso, no funciona
J Lee

15
desearía que esta fuera la respuesta aceptada, es la forma "correcta" de hacer esto con fontawesome. La respuesta aceptada es un truco que no se ajusta bien.
ask_io

44
Lo mismo con los números<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

2
@emrah: es la única opción aquí que es verdaderamente fontawesome, no css personalizado, por lo que es más preciso que cualquier cosa aquí.
ask_io

1
Solución muy elegante. @mmativ si te refieres a un color de fondo en el círculo, simplemente haces <i class = "fa fa-circle-thin fa-stack-2x" style = "color: blue"> </i>
J.Kirk.

34

No necesitas trucos css o html para ello. Font Awesome ha creado una clase para ello: fa-circle Para apilar varios iconos juntos, puede usar la clase fa-stack en el div padre

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

// Y ahora tenemos el icono de Facebook dentro del círculo :)


2
Sampat Badhe ha dicho en su respuesta lo mismo hace más de 2 años. ¿Por qué no lees otras respuestas antes de escribir la tuya?
Taras Yaremkiv

Hola, lo siento por Sampat, no lo vi responder, intentaré modificar mi respuesta y agregar más soluciones o información útil.
Vasyl Gutnyk

1
Es una buena solución, pero le da un fondo azul a cada icono. Cualquier trabajo alrededor?
Jamshaid Kamran

@CodeIt Solo use css para borrarlo o agregar un nuevo color de fondo No debería ser un problema.
Vasyl Gutnyk

27

Icono de fuente en un círculo usando em como medida base

si usa ems para las mediciones, incluido line-height, font-sizey border-radiuscon text-align: centereso hace que las cosas sean 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

Actualización: más bien use flex.

Si quieres precisión, este es el camino a seguir.

Violín. Ir a jugar -> http://jsfiddle.net/atilkan/zxjcrhga/

Aquí está el 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>

Aquí está el 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;
}

Que te diviertas


agregando text-align: center; Hace que funcione con casi todo, incluso la información de fa
Marcio

¿Qué tal alineación vertical?
localhoost

9

También puedes hacer esto. Quería agregar un círculo alrededor de mis iconos de icomoon. Aquí está el código.

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

8

ACTUALIZACIÓN :

Al aprender flex recientemente, hay una forma más limpia (sin tablas y menos CSS). Establezca el contenedor como display: flex;y para centrar sus elementos secundarios, asígnele las propiedades align-items: center;de justify-content: center;centrado (vertical) y (horizontal).

Ver este JS Fiddle actualizado


Es extraño que nadie sugiriera esto antes. Siempre uso tablas para hacer esto.
Simplemente haga que una envoltura tenga display: tabley centre las cosas dentro de ella para alineación text-align: centerhorizontal y vertical-align: middlevertical.

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

y algunos tontos como este

.wrapper{
  display: table; 

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

}

o ver este JS Fiddle


¡Esta es una muy bonita, limpia y pequeña! Aquí hay un violín con CSS en lugar de SCSS jsfiddle.net/bqtkmy0s
summsel

@summsel, ¿no es exactamente lo mismo que mi respuesta original? Acabas de escribir el código en scss y no en css.
nclsvh

Sí, claro que lo es. Probé su solución en CSS y hay muchas personas que prefieren CSS. Entonces, ¿por qué no publicar el jsfiddle de esta versión css?
summsel

5

Este es el enfoque que no necesita usar padding, solo configure el heighty widthpara el ay deje que se flexmaneje 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

El siguiente ejemplo no funcionó para mí, ¡esta es la versión que hice 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

prueba esto

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

Los iconos de Font Awesome se insertan como: antes. Por lo tanto, puede diseñar su i o un estilo similar:

.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

Simplemente puede obtener el icono redondo usando este código:

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

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

Me gusta la respuesta de Dave Everitt con la «altura de línea», pero solo funciona especificando la «altura» y luego tenemos que añadir «! Important» a la altura de línea ...

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

La altura de la línea me lo estaba resolviendo
mecógrafo el

Agregar !importantes una curita, no una solución. Significa que tiene otra propiedad CSS en otro lugar que anula su propiedad.
TylerH

0

Esta es la mejor y más precisa solución que he encontrado hasta ahora.

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;
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.