css - 如何使用 css 在 Font Awesome 图标中创建不同 Angular 边框？

Question

这个问题在这里已经有了答案:





CSS triangle custom border color

(5 个回答)



Html/Css Triangle with pseudo elements

(1 个回答)


4年前关闭。




我想制作一个 Font Awesome 图标的边框，就像这样。如何使用css？
Screenshot

Answer 1

见下文。希望这可以帮助。

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