如何使用 css 在字体真棒图标中创建不同角度的边框？ [复制]

Posted 2023-03-06

【中文标题】如何使用 css 在字体真棒图标中创建不同角度的边框？ [复制]

【英文标题】：How to create border with different angles in font awesome icons using css? [duplicate]

【发布时间】：2018-07-31 16:29:57

【问题描述】：

我想做一个字体真棒图标的边框，就像这样。如何使用css？ Screenshot

【问题讨论】：

提供您的代码

.fa font-weight: 700;字体大小：40px； 软件开发 span> 移动应用开发 CMS 电子商务

【参考方案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>

【讨论】：

如何将我的文本显示为同一行。因为当我使用 div 时，我的文本正在移动到下一行。有什么想法吗？

.fa font-weight: 700;字体大小：40px； 软件开发 span> 移动应用开发 CMS 电子商务