css - 将弹出窗口中的文本和图标从右移到左，反之亦然

Question

我有一个弹出窗口，它在右侧显示图标，在左侧显示文本

Click here to see demo

App Module.ts

SimpleNotificationsModule.forRoot( {
      icons: {
        success: '<i class="icon-check-sign icon-3x"></i>',
        alert: '<i class="icon-exclamation icon-3x"></i>',
        error: '<i class="icon-bug icon-3x"></i>',
        info: '<i class="icon-info icon-3x"></i>',
        warn: '<i class="icon-warning-sign icon-3x"></i>'
      }
    })

CSS

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

td i {
    text-align:left;
}

Now I want to flip it, like icon on the left and text on the right.

这是源代码:https://github.com/flauc/angular2-notifications

但我想在不更改源代码的情况下，只更改 CSS 类

我在堆栈溢出中找到问题

How to center Font Awesome icons horizontally?

和解决方案并实现了在接受的解决方案中显示的额外类。但是没有区别。

如何翻转图标和文字？

Answer 1

添加这些样式

<style>
   .simple-notification .icon {
      left: 0 !important;
  }


  .simple-notification.has-icon .sn-title, .simple-notification.has-icon .sn-content, .simple-notification.has-icon .sn-html {
      padding: 0 0px 0px 50px !important;
  }
  </style>

查看更新 snippet