html - CSS - 字体样式很棒的字体图标

Question

我想对 Font Awesome 提供的一个名为“Font Awesome”的字体图标进行样式化 fa fa-user 并以与以下示例类似的方式渲染颜色。

圆形边框不是问题，但我想不出渲染这种类型的方法 玻璃般的颜色组合，无需使用 background-image 属性。

就我而言，color 是唯一可用的属性，因为它是一种字体。

是否可以使用 CSS 实现接近示例图像的效果？

这是Demo

已编辑

我应该提到我不希望在背景上获得玻璃般的外观。 仅在图标本身上。

Answer 1

您当然可以接近一些简洁的 CSS3 效果(文本阴影和渐变)

http://jsbin.com/UCokedat/1/edit

.fa-user {
  color: white;
  background-color: lightgrey;
  padding: 40px 45px;
  font-size: 50pt;
  border-radius: 50%;
  text-shadow: 1px 1px 1px silver;
  text-shadow: inset 1px 1px 1px #eee;

 background: rgb(226,226,226);
background: -moz-linear-gradient(-45deg,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)));
background: -webkit-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -o-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );

}