css – 制作字体令人敬畏的图标在一个圆圈?

前端之家收集整理的这篇文章主要介绍了css – 制作字体令人敬畏的图标在一个圆圈?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用字体awsome在一些项目,但我有一些事情,我想做的字体真棒图标,我可以轻松调用图标像这样
<i class="fa fa-lock"></i>

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

使用

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

会起到效果,但问题是图标总是大于txt或元素旁边,任何解决方案?

解决方法

尝试这个:
i
{
  display: inline-block;
  border-radius: 60px;
  Box-shadow: 0px 0px 2px #888;
}

这里是一个工作的小提琴:http://fiddle.jshell.net/4LqeN/你可能需要玩的项目的填充。

更新

由于人们不断地投票反对我的回答我想指出:检查问题中的图像。 Op想要一个阴影为圆,而不是笨重的堆叠图标。如果你不能谷歌或正确读文档,至少不要误解答案。

猜你在找的CSS相关文章