带有令人敬畏的堆叠图标的离子答案

【问题标题】：Ionic with fontawesome, stacked icons带有令人敬畏的堆叠图标的离子
【发布时间】：2018-01-17 04:34:59
【问题描述】：

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

现在，我得到了这个 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>

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

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

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

【问题讨论】：

很高兴看到你的 html，或者更好的代码 sn-p。
没有太多的HTML涉及。我正在使用动态图标名称。
实际上，我希望看到最终的 HTML 显示 .ion-md-notice 类，因为它是应用 CSS 的位置。但不是 Ionic-Angular 的东西。很抱歉造成误解。
哦，对了。马上来。

标签： css ionic-framework font-awesome

【解决方案1】：

请看下面的sn-p。 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>

【讨论】：

乐于助人！