Css 如何设置警告标签的样式

我希望有一个类似于失败和成功样式（as）的警告标签样式

我试图在代码中设置图标，但结果如下（左：失败样式，右：我的尝试）：

我想要一个橙色边框和一个橙色警告图标

编辑：按照注释中的要求显示一些代码

label1.setStyleName(ValoTheme.LABEL_FAILURE); // left
label2.setIcon(FontAwesome.WARNING); // right

---

两个成功/失败标签均已定义（Vaadin 7.5的Valo主题）。因此，您可以基于此代码创建自己的。在应用程序主题中添加以下内容：

$warning-color: orange;

.v-label-warning {
  background: $v-textfield-background-color;
  color: valo-font-color($v-textfield-background-color);
  border: 2px solid $warning-color;
  border-radius: $v-border-radius;
  padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
  font-weight: $v-font-weight + 100;
  font-size: round($v-font-size * 0.95);

  &:before {
    font-family: FontAwesome;
    content: "\f071";
    margin-right: .5em;
    margin-left: round($v-unit-size/-2);
    color: $warning-color;
  }
}

请注意，这基本上只做了两件事：在开始时为颜色引入一个新的变量（然后用于图标和边框），并使用图标中的连字

标签样式的名称为

警告

。所以在标签上做一个

setStyleName（“警告”）

---

这是针对Vaadin 7.5.5进行的测试。如果您的版本不同，您可能希望签入上面链接的文件，以确保您从那里复制并采用。如果您想要的不仅仅是这个，我建议您创建一个

@mixin

，以减少（甚至更多）复制和粘贴代码。

人们会建议您提供代码。。不仅仅是一个图像。。谷歌应该在这里帮助您轻松地使用像Font Awesome这样的图标库，或者您正在寻找使用嵌入式图像的解决方案？非常好。正是我想要的。我用Vaadin 7.5.4测试了它，它对我来说非常有用。在Vaadin Designer中也可以很好地显示。非常感谢你！