Hacer iconos impresionante fuente en un círculo?
Estoy usando font awsome en algún proyecto, pero tengo algunas cosas que quiero hacer con iconos font awesome, puedo llamar fácilmente a un icono como este
<i class="fa fa-lock"></i>
¿Es posible que todos los iconos siempre estén en círculo redondo con borde, algo como esto tengo una imagen
Usando
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 txt o elemento al lado, alguna solución?
11 answers
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 /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-02 16:46:17
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>
Refer Font Awesome Stacked Icons
Actualizar:- Violín para iconos apilados
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-12 09:29:49
No necesitas trucos css o html para ello. Font Awesome ha construido una 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 icono de Facebook dentro del círculo:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-21 18:06:02
Si utiliza ems para las mediciones, 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 */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-03 09:07:26
Actualizar: En lugar de utilizar 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;
}
Diviértete
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-09 07:21:48
También puedes hacer esto. Quería añadir un círculo alrededor de mis iconos icomoon. Aquí está el código.
span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-10 18:13:44
Este es el enfoque que no necesita usar padding
, solo configure height
y width
para a
y deje que flex
maneje con 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-12 09:41:49
ACTUALIZACIÓN :
Al aprender flex recientemente, hay una forma más limpia (sin tablas y menos css). Establezca la envoltura como display: flex;
y para centrar sus hijos déle las propiedades align-items: center;
para el centrado (vertical) y justify-content: center;
(horizontal).
Ver esto actualizado JS Fiddle
Es extraño que nadie haya sugerido esto antes.. Siempre uso mesas para hacer esto.
Simplemente haga que una envoltura tenga display: table
y centre las cosas dentro de ella con text-align: center
para 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 ver esto JS Fiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-07 13:33:45
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-11 12:09:02
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-27 00:54:17
Los iconos de fuente impresionante se insertan como un :antes. Por lo tanto, puedes estilizar tu i o a de la siguiente manera:
.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-24 11:31:53