字体真棒图标颜色

Question

是否可以将颜色字体真棒图标放在边缘和内部以便透明？ 就像在照片中一样

我有这段代码

<i class="icon fa fa-check-circle"></i>

.icon{
    color: #26b2ad;
}

看起来：

Answer 1

只需使用border-radius创建i标记周围的圆圈：

＆＃13;

＆＃13;

i {
border-radius:100%;
border:2px solid green;
padding:10px;
background:red;
color:blue;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-check"></i>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助

更新

我已经更新了代码，以显示您可以从边框，背景和FontAwesome图标为其中的任何部分着色。

Answer 2

是的，使用＆＃34; Open＆＃34;版本：

＆＃13;

＆＃13;

body{
    background: darkblue;
    color: darkblue;
}
i{
    color: #26b2ad;
    font-size: 5em !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="icon fa fa-check-circle"></i>
<i class="icon fa fa-check-circle-o"></i>
                         --------^^

＆＃13;

＆＃13;

＆＃13;