Question

我想创建带有图标和文字的按钮。我从以下开始：

<ion-view view-title="Title">
    <ion-content>
        <div class="list">
            <a ng-repeat="image in images" class="item">
                <div class="container">
                    <img ng-src="{{image}}" />
                </div>
                <div class="container-side-menu">
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-eye"></i> preview
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-crop"></i> crop
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-android-options"></i> styles
                        </button>
                    </div>
                    <div>
                        <button class="button button-clear">
                            <i class="icon ion-social-tumblr"></i> text
                        </button>
                    </div>
                </div>
            </a>
        </div>
    </ion-content>
</ion-view>

使用以下css：

.container {
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/frame_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 245px;
    height: 325px;
    position: relative;
}

.container img {
    width: 87.5%;
    height: 68.5%;
    position: absolute;
    top: 0;
    bottom: 13%;
    left: 0;
    right: 0;
    margin: auto;
}

.container-side-menu {
    width: 10%;
    height: 50%;
    top: 20%;
    right: 15px;
    position: absolute;
    margin: auto;
}

.container-side-menu .button {
    color: white !important;
}

但结果是文本被写在按钮的图标旁边。

如何在没有填充的情况下直接在按钮下设置文本，如何使我的图标更大，文字更小？

我能够在图标下面找到文字：

<ion-view view-title="Title">
    <ion-content>
        <div class="list">
            <a ng-repeat="image in images" class="item">
                <div class="container">
                    <img ng-src="{{image}}" />
                </div>
                <div class="container-side-menu">
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-eye"></i> 
                            <span>preview</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-crop"></i> 
                            <span>crop</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-android-options"></i> 
                            <span>styles</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-social-tumblr"></i> 
                            <span>text</span>
                        </button>
                    </div>
                </div>
            </a>
        </div>
    </ion-content>
</ion-view>

的CSS：

.container-side-menu div {
    vertical-align: top;
    text-align: center;
}

.container-side-menu span {
    display: block;
    font-size: 10px;
}

但是：图标和文字之间的空间太大。我怎么能删除那个空间？

Answer 1

使用下面的css：

i + 1

Answer 2

更改容器内按钮的line-height。

angular.module('app', ['ionic']);

.container-side-menu {
  width: 10%;
  top: 15%;
  right: 15px;
  position: absolute;
  margin: auto;
}
.container-side-menu .button {
  font-size: 10px;
  line-height: 10px; // Add
}
.container-side-menu .button-icon .icon {
  display: block;
  font-size: 30px;
  margin-bottom: 3px !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Awesome App</h1>
    </ion-header-bar>
    <ion-content class="padding">
      <div class="container-side-menu">
        <div>
          <button class="button button-icon">
            <i class="icon ion-eye"></i> preview
          </button>
        </div>
        <div>
          <button class="button button-icon">
            <i class="icon ion-crop"></i> crop
          </button>
        </div>
        <div>
          <button class="button button-icon">
            <i class="icon ion-android-options"></i> styles
          </button>
        </div>
        <div>
          <button class="button button-icon">
            <i class="icon ion-social-tumblr"></i> text
          </button>
        </div>
      </div>
    </ion-content>
  </ion-pane>
</body>

</html>

离子：在Icon下放置文字

2 个答案: