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>

正如你所看到我在上面使用图标。现在我在离子文档中读到我可以使用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;
}

我将font-size设置为50px但没有任何变化。我无法改变图标的大小。我怎样才能改变它们？

Answer 1

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

＆＃13;

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

＆＃13;

TEXT HERE！

在栏杆内的图标不能大小

1 个答案: