Question

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

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;
}

现在我要翻转它，如左侧的图标和右侧的文字。

这是源代码：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

弹出窗口中的文本和图标从右向左移动，反之亦然

1 个答案: