css - icon - font awesome ttf
Hacer iconos Font Awesome en un círculo? (11)
Estoy usando una fuente impresionante en algún proyecto, pero tengo algunas cosas que quiero hacer con iconos increíbles de fuentes, puedo llamar fácilmente a un icono como este
<i class="fa fa-lock"></i>
¿Es posible que todo ícono siempre esté en círculo con borde, algo como esto tengo una imagen?
Utilizando
i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}
Hará el efecto, pero el problema es que los iconos son siempre más grandes que el texto o el elemento al lado, ¿alguna solución?
Con Font Awesome puedes usar fácilmente iconos apilados como este:
<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>
referir fuente Awesome Stacked Icons
Actualización: - Fiddle para iconos apilados
El siguiente ejemplo no me funcionó, ¡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;
}
Este es el enfoque en el que no necesita usar el padding , simplemente configure el height y el width para la a y deje que el mango se flex con el 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>
Los iconos de Font Awesome se insertan como a: before. Por lo tanto, puedes darle estilo a tu yo o algo así:
.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
No necesitas trucos css o html para ello. Font Awesome ha construido en clase para él - 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>
// Y ahora tenemos el ícono de Facebook dentro del círculo :)
También puedes hacer esto. Quería agregar un círculo alrededor de mis íconos icomoon. Aquí está el código.
span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
Vine aquí por lo mismo. Dos respuestas podrían hacer el trabajo pero no me convencieron. Me hice mejor.
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
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;
}
si usa ems para las medidas, incluyendo line-height , font-size y border-radius , con text-align: center , hace las cosas 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 */
}
ACTUALIZAR :
Después de aprender a flexionar recientemente, hay una manera más limpia (sin tablas y menos css). Establezca el contenedor como display: flex; y para centrarlo los niños le dan las propiedades align-items: center; para (vertical) y justify-content: center; centrado (horizontal)
Ver este JS Fiddle actualizado
Es extraño que nadie haya sugerido esto antes ... Siempre uso tablas para hacer esto.
Simplemente haga que una envoltura tenga una display: table y las cosas del centro en su interior con text-align: center para text-align: center horizontal y vertical-align: middle para alineación vertical.
<div class=''wrapper''>
<i class=''icon fa fa-bars''></i>
</div>
y algunos sass como este
.wrapper{
display: table;
i{
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
o vea este JS Fiddle
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>