Ionic with fontawesome, stacked icons

Question

i'm trying to stack those two icon in a ionic icon. I know how to make the custom ionic icon, no problem. I also know about the :before and :after trick to stack icon from this question

For now, i got this 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;
}

Here is the 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>

final result :

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

I manage to make it fit for one size of icon, no problem,

But when I try to use the icon elsewhere, the icon does not fit anymore.

Please note that in the second images, the font are bigger.
Any help would be appreciated. Thanks.

It would be great to see your html, or even better a code snippet. — Kosh, Jan 16 '18 at 16:10
There is not much HTML involve. I'm using dynamic icon name. — Nicolas, Jan 16 '18 at 16:42
Actually I wanted to see the final HTML displaying `.ion-md-notice` class as it's where your CSS is being applied to. But not Ionic-Angular stuff. Sorry for the misunderstanding. — Kosh, Jan 16 '18 at 17:01

Kosh · Accepted Answer · 2018-01-16T20:34:59.663

Please look at the snippet below. The CSS part. Probably you'll have to adjust classes and set the desired font-size to .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>

Ionic with fontawesome, stacked icons

1 Answers1