自定义字体很棒 CSS

Question

我正在尝试使用 Font Awesome 来创建我的表单。但是 FA 图标已经带有填充颜色。当我尝试添加颜色时，它被赋予了整个图标。有没有办法做到这一点？或者我应该使用任何其他 unicode？

注意：我必须通过 CSS 才能实现此目的。不应配置父组件。所以我只需要传递一个 CSS class 来实现这个。请建议我是否有任何其他我可以使用的 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; }

请帮帮我。谢谢

Answer 1

好吧，FontAwesome 图标并不是您想要的。对于初学者来说，它没有边框，所以即使背景颜色透明，也不会有白色边框。我建议您自己创建 'icon'。尝试这样的事情：

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 宽度和高度（确保 width = height 以使其成为完美的圆）和边框粗细，但它应该几乎可以满足您的需求。

这是一个工作示例：https://jsfiddle.net/k61gaf9z/

Answer 2

我建议将图标 class 更改为 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;
}

随时 fiddle 使用这些值，以便更接近您正在寻找的内容。

此外，如果您不仅限于 CSS，您还可以 stack the exclamation and circle-thin 个图标

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

自定义字体很棒 CSS

Custom Font Awesome CSS

html

css

twitter-bootstrap

font-awesome