离子与fontawesome，堆积的图标

Question

我正在尝试将这两个图标堆叠在一个离子图标中。我知道如何制作自定义离子图标，没问题。我也知道来自this question

的:before和:after技巧来叠加图标

现在，我得到了这个CSS。

.ion-md-notice:before, .ion-ios-notice:before {
    font-family: "FontAwesome" !important;
    content: '\f133' !important;
    bottom: -0.25em;
    position: relative;
    color: #d81717;
}

.ion-md-notice:after, .ion-ios-notice:after {
    font-family: "FontAwesome" !important;
    content: '\f05e' !important;
    font-size: 12px;
    position: relative;
    top: -0.8em;
    color: #d81717;
}

这是HTML，

  <ion-item *ngFor="let eventItem of dayEvents" text-wrap>
        <ion-icon [name]="eventItem.icon" item-left></ion-icon>
        <ion-icon name="create" item-right color="secondary" (click)="addEvent(eventItem)"></ion-icon>
        <ion-icon name="trash" item-right color="danger" (click)="removeEvent(eventItem)"></ion-icon>
        <p class="title">{{eventItem.title | slice: 0: 30}}</p>
        <p class="subtitle" *ngIf="eventItem.description">{{eventItem.description | slice: 0: 40}}...</p>
        <p class="times">{{eventItem.start | date: 'shortTime'}} - {{eventItem.end | date: 'shortTime'}}</p>
      </ion-item>

最终结果：

<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>

我设法让它适合一个尺寸的图标，没问题，


但是当我尝试在其他地方使用图标时，图标就不再适合了。



请注意，在第二张图片中，字体较大 任何帮助，将不胜感激。感谢。

Answer 1

请查看下面的代码段。 CSS部分。您可能需要调整类并将所需的字体大小设置为.item-icon。

.item-icon {
  font-family: 'FontAwesome';
  position: relative;
  font-size: 60px
}

.item-icon:before {
  content: '\f133';
  color: #d81717;
}

.item-icon:after {
  content: '\f05e';
  font-size: .5em;
  position: absolute;
  top: .8em;
  left: .5em;
  color: #d81717;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>