如何使用 css 在 font awesome 图标中创建不同角度的边框？
How to create border with different angles in font awesome icons using css?
我想制作一个字体真棒图标的边框，就像这样。
如何使用css？
Screenshot
见下文。希望这有帮助。
.icon-container {
background: darkgreen;
color: white;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-container::after {
content: "";
background: darkgreen;
width: 1rem;
height: 1rem;
position: absolute;
bottom: -5px;
left: calc( 50% - 0.5rem);
transform: rotate(45deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-container">
<i class="fa fa-car fa-2x" aria-hidden="true"></i>
</div>
我想制作一个字体真棒图标的边框，就像这样。
如何使用css？
Screenshot
见下文。希望这有帮助。
.icon-container {
background: darkgreen;
color: white;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-container::after {
content: "";
background: darkgreen;
width: 1rem;
height: 1rem;
position: absolute;
bottom: -5px;
left: calc( 50% - 0.5rem);
transform: rotate(45deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-container">
<i class="fa fa-car fa-2x" aria-hidden="true"></i>
</div>