如何将按钮与离子图标对齐

Question

我想将这些按钮与文本对齐为正确的格式。我正在使用离子，我想要像fa-fw引导程序一样 这是代码：

<div class="content padding">
      <button class="button button-block button-positive icon ion-log-in" ng-click="login(username, password)">&nbsp;Login</button>
      <a class="button button-block button-transparent icon ion-ios-help-empty">&nbsp;Forgot Password</a>
      <button class="button button-block button-stable icon ion-key" ng-click="register(username, password)">&nbsp;Register</button>
</div>

Answer 1

在Ionic icon-left和icon-right类中可以使用按钮，您还可以使用带有按钮的自定义css获取更多帮助，然后转到here。

例如，

<button class="button icon-left ion-home">Home</button>
<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

希望这会对你有帮助！

Answer 2

您可以使用像icon-left icon-right这样的离子内置类。如果您需要使用fa-aw等图标更灵活，您需要编写自己的自定义css或在项目中使用font-awesome本身

＆＃13;

＆＃13;

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>
<br>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
<br>


<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

<a class="button button-icon icon ion-settings"></a>
<br>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

＆＃13;

＆＃13;

＆＃13;