将字体设为“真棒图标”吗？ [英] Make Font Awesome icons in a circle?

问题描述

我在一些项目上使用字体awsome，但我有一些事情，我想做的字体真棒图标，我可以轻松调用图标像这样

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

有可能所有的图标总是在圆的边框，像这样我有一个图片

使用

  i 
 {
 background-color：white ; 
 border-radius：50％; 
 border：1x纯灰色; 
 padding：10px; 
} 
  

会有效果，但问题是图标总是大于txt

$ p

<$ p

$ p> i
{
display：inline-block;
border-radius：60px;
box-shadow：0px 0px 2px＃888;
}


这是一个工作的小提琴： http://fiddle.jshell.net/4LqeN/ 您可能需要使用该项目的填充。

< h2>更新

由于人们不断投票拒绝我的回答，我想指出：检查问题中的图片。 Op想要一个阴影为圆，而不是笨重的堆叠图标。如果您无法正确Google或读取文件，至少不要误解答案。

I am using font awsome on some project but i have some things that i want to do with font awesome icons, i can easy call icon like this

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

Is it possible to all icon always be in round circle with border, somthing like this i have a picture

Using

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

Will do the effect, but the problem is that icons are always bigger that txt or element beside, any solutions?

解决方案

Try this:

i
{
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
}

Here is a working fiddle:http://fiddle.jshell.net/4LqeN/ you maybe need to play with the padding of the item.

Update

As people constantly voting down my answer I'd like to point out: Check the image in the question. Op wanted a shadow as circle, not a clumsy stacked icon. If you can't google or read docs correctly, at least don't misinterpret answers.

这篇关于将字体设为“真棒图标”吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！