自定义Font Awesome CSS

Question

我试图使用Font Awesome创建表单。但是FA图标已经带有填充颜色。当我尝试添加颜色时，它会应用于整个图标。是否有可能做到这一点？或者我应该使用其他Unicode？

注意：我必须仅通过CSS实现此目标。父组件不应进行配置。因此，我必须仅传递一个CSS类来实现此目的。如果我可以使用其他Unicode，请给我建议，因为我正在使用的那个看起来并不像样式指南中的那个

-非常感谢！

我有以下内容：

第一张图片是我所拥有的。第二张图片是应该是什么样子的。

.exclamation-red .validation-tooltip-text:before { border: none; content: "\f06a"; font-family: fontAwesome; left: 10px; position: absolute; font-size: 20px; top: 12px; color: white; }

请帮我解决这个问题。谢谢

- Brr Switch

Answer 1

嗯，FontAwesome图标并不完全符合你的要求。首先，它没有边框，所以即使将背景颜色设置为透明，也无法得到白色边框。

我建议自己创建“图标”。尝试像这样：

HTML:

<div class="exclamation-circle">
    &#x21;
</div>

CSS：

.exclamation-circle {
    color: white;
    width: 30px;
    height: 30px;
    font-size: 1em;
    font-weight: bold;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50%;
    text-align: center;
}

你可以调整字体大小、div的宽度和高度（确保宽度等于高度以使其成为一个完美的圆形）和边框厚度，但这基本上已经足够满足你的需求。

这里有一个可行的例子：https://jsfiddle.net/k61gaf9z/。

- MacSvensson

---

谢谢你的帮助。正如我所说，我只能传递一个CSS类。 - Brr Switch

Answer 2

我建议将图标类更改为fa-exclamation。或者您可以更改Unicode为"\f12a"并添加带有border-radius的白色边框。将宽度设置为图标高度，并在其中心对齐。如下所示：

.exclamation-red {
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    width: /* set this to the same as the icon height */
    text-align: center;
}

.exclamation-red:before {
    content: "\f12a";
    color: #FFFFFF;
}

随意调整数值以更接近你想要的效果。

如果不仅限于CSS，你可以堆叠感叹号和空心圆圈图标。

- pll33

---

我只能使用CSS。这似乎起作用了。你能帮我纠正一下吗？https://jsfiddle.net/vamshikrishna144/vqfbnns6/#&togetherjs=wEL5rUSwwD - Brr Switch

Answer 3

使用fa-exclamation代替，您可以在其中添加白色边框来使其呈现圆形样式。

.validation-tooltip-text:before {
  content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/
  font-family: fontAwesome;
  left: 10px;
  position: absolute;
  font-size: 20px;
  line-height:22px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  vertical-align:middle;
  top: 12px;
  color: white;
}

http://codepen.io/partypete25/pen/dMwwvz?editors=1100

- partypete25

---

非常感谢！我很感激你的帮助。 - Brr Switch