css - 自定义 ionic 图标 - ionicons

Question

我有一个创建图标的需求，如下所示。

我试过如下所示。

.html

<ion-content padding>
   <div style="background:lightblue;width: 50px;height: 50px;border-radius: 50%;">
    <ion-icon name="heart"></ion-icon>
  </div>
</ion-content>

Plunker is here

Q1:这是创建这种图标外观的正确方法吗？

Q2:怎样才能做到和上图一样？

问题 3:之后，我需要在任何组件的任何位置使用该图标。如果我使用 margins 将 heart 图标居中，希望它不会起作用在任何地方没有？换句话说，我需要将它作为一个整体来使用。

希望您能为此提供反馈。

Answer 1

.heart-icon {
  background: lightblue;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: #FFF;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="heart-icon">
  <i class="fa fa-heart" aria-hidden="true"></i>
</div>

希望这是你想要实现的。您可以使用 ionic icon 而不是 font awesome。