CSS - 样式字体真棒字体图标

Posted 2023-03-03

【中文标题】CSS - 样式字体真棒字体图标

【英文标题】：CSS - Styling Font Awesome font icons

【发布时间】：2013-12-06 19:36:45

【问题描述】：

我想对 Font Awesome 提供的字体图标之一进行风格化，称为 fa fa-user 并以与以下示例类似的方式呈现颜色。

圆形边框不是问题，但我想不出办法来呈现这种 不使用background-image 属性的玻璃状颜色组合。

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

使用 CSS 可以实现与示例图像接近的任何东西吗？

这是Demo

已编辑

我应该提到我不想让背景看起来像玻璃一样。 仅在图标本身上。

【参考方案1】：

不确定它是否可以完全复制，但我追求与 SpliFF 有点相似的想法

http://jsbin.com/OGIKIQa/6/edit

    .fa-user 
  color: white;
  padding: 40px 45px;
  font-size: 50pt;

.fa-user:before 
  background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


  color: white;
  background-color: lightgrey;
  padding: 40px 45px;
  font-size: 50pt;
  border-radius: 50%;

【讨论】：

你的小提琴有问题，我认为你删除了 html 部分。

【参考方案2】：

您当然可以使用一些简洁的 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 );

【讨论】：

谢谢。我只想要图标本身的玻璃外观。不是图标的背景。这可行吗？

不这么认为，很确定渐变仅作为background 属性有效，而不是color 属性。

我认为你将不得不这样做作为一个形象有任何机会