Question

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

注意：我必须通过CSS实现这一点。不应该配置父组件。所以我必须只传递一个CSS类来实现这一点。请建议我，如果有任何其他unicode我可以使用，因为我使用的那个unontode看起来不像风格指南中的那个

- 非常感谢你！

我拥有的：

第一张照片就是我的照片。第二张图片是它应该是什么样的

.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图标并不是你想要的。对于初学者来说，它没有边框，所以即使你让背景颜色透明，你也不会有白色边框。我建议创建＆＃39;图标＆＃39;你自己。尝试这样的事情：

HTML：

.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;
}

CSS：

{{1}}

你可以使用font-size，div width和height（确保width = height以使其成为一个完美的圆圈）和边框厚度，但它应该可以满足你的需求。

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

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，则可以stack exclamation和circle-thin图标

Answer 3

请使用fa-exclamation，您可以将其设置为圆形，并为其添加白色边框。

    $filter_r=215;
    $filter_g=5;
    $filter_b=5;
    $alpha=70;
    $suffixe="_red";
    $path="./img/foto_220_590.png";
    if(is_file($path)){
        $image=imagecreatefrompng($path);
        $new_path=substr($path,0,strlen($path)-4).$suffixe.".png";

         echo $imagex = imagesx($image);
         echo $imagey = imagesy($image);
        for ($x = 0; $x <$imagex; ++$x) {
            for ($y = 0; $y <$imagey; ++$y) {
                $rgb = imagecolorat($image, $x, $y);
                $TabColors=imagecolorsforindex ( $image , $rgb );
                $color_r=floor($TabColors['red']*$filter_r/255);
                $color_g=floor($TabColors['green']*$filter_g/255);
                $color_b=floor($TabColors['blue']*$filter_b/255);
                //$newcol = imagecolorallocate($image, $color_r,$color_g,$color_b);
                // this new alpha
                $newcol = imagecolorallocatealpha($image, $color_r,$color_g,$color_b,$alpha);
                imagesetpixel($image, $x, $y, $newcol);
            }
        }
         imagepng($image,$new_path);

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

自定义字体真棒CSS

3 个答案: