html - 为 HTML 按钮使用自定义图标

标签 html css ionic-framework

我正在使用 IONIC 2 构建移动应用程序,并具有以下一组按钮。其中三个使用标准的 Ionicons 资源。然而,第三个使用了自定义的按键图像,但如您所见,它没有适当缩放。

Buttons

这是我的代码:

CSS:

  .buttons .key { 
      background-color: #de574b;       
      transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg); 
  }

  .ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

html:

 <div class="buttons">
      <button class="bluetooth">
        <ion-icon name="bluetooth"></ion-icon>
      </button>

      <button class="help">
        <ion-icon name="md-help"></ion-icon>
      </button>

      <button class="key">
        <ion-icon name="key"></ion-icon>
      </button>

      <button class="new" (click)="newDevice()">
        <ion-icon name="md-add"></ion-icon>
      </button>
  </div>

我的 max-height 属性没有任何作用,height 属性也没有。我如何设置此图标的样式以使其看起来像其他图标一样?

最佳答案

align-content 仅适用于 display: flexflex-direction: columnflex-flow: row wrap (在特定情况下)。

尝试:

.ion-ios-key, .ion-md-key {
      line-height: 20px;
      vertical-align: center;
      background: url('../../img/Key.png')no-repeat;
      background-size: contain;
    }

删除:

.ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

background-size: contain;将自动居中图像并将其扩展到足以保持其纵横比(即不变形的最大宽度和高度),并且不会像您在原始代码中遇到的那样进行裁剪。如果您对其位置不满意,请使用 background-position: centerbackground-position: 45% 45% *

*45% 45% 只是用作示例的任意值。

关于html - 为 HTML 按钮使用自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35985013/

相关文章:

html - 表格单元格 div 内常规 div 的奇怪填充行为

android - Ionic CSS 动画在 Android 设备上不起作用

javascript - 如何随机更改多个 <SPAN> 的 backgroundColor?

php - 如何避免 substr() 破坏 html 标签?

javascript - 如何将 div 元素放入 Canvas

javascript - 如何仅显示/隐藏 php foreach 循环中的特定 div 类

css - 如何将 div 的高度设置为当前视口(viewport)高度的某个百分比?

html - 使侧边栏\页面大小均匀

javascript - 不使用 "back"按钮更改 View Ionic

ionic-framework - 有没有办法读取 Ion-Segment 值以将它们传递给 Ion-Fab 以根据 SwitchCase 运行不同的功能?