html - 无法更改栏页脚内图标的大小

Question

我有一个栏脚:

<div class="crop modal">
    <div class="crop-center-container">
        <div class="crop-img" ng-style="{width: width + 'px', height: height + 'px'}"></div>
    </div>
    <div class="crop-center-container">
        <div class="crop-select" ng-style="{width: width + 'px', height: height + 'px'}"></div>
    </div>
    <div class="bar bar-footer bar-dark">
        <div class="button-bar">
            <button class="button button-clear crop-button icon ion-ios-close" ng-click="cancel()"></button>
            <button class="button button-clear crop-button icon ion-ios-undo"></button>
            <button class="button button-clear crop-button icon ion-arrow-left-a"></button>
            <button class="button button-clear crop-button icon ion-ios-redo"></button>
            <button class="button button-clear crop-button icon ion-ios-checkmark" ng-click="crop()"></button>
        </div>
    </div>
</div>

如您所见，我在上面使用了图标。现在我在 ionic 文档中读到我可以使用 font-size 更改图标的大小，所以我做了:

.crop {
    background-color: #000;
    overflow: hidden;
}

.crop-center-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.crop-img {
    opacity: 0.6;
}

.crop-select {
    overflow: hidden;
}

.crop-button {
    font-size: 100px !important;
}

.bar.bar-footer {
    border: none;
    background-color: transparent;
    background-image: none;
}

我将字体大小设置为 50px 但没有任何变化。我无法更改图标的大小。我该如何更改它们？

Answer 1

那是因为你之间没有文字，所以你不能设置字体大小。

<button class="">TEXT HERE!</button>

在此输入文字!