【问题标题】:How to change the size of an icon in an ion-header-bar?如何更改 ion-header-bar 中图标的大小?
【发布时间】:2016-07-14 22:49:02
【问题描述】:

我正在使用离子版本1.2.4

我实际上是在尝试通过更改图标的字体大小来减小图标的大小。什么是适当的 CSS 选择器来更改下面代码中图标的font-size?我尝试的任何方法似乎都不起作用。

  <ion-nav-bar>
    <ion-nav-buttons side="right">
        <button class="button button-clear">
            <i class="icon ion-edit"></i>
        </button>
    </ion-nav-buttons>
  </ion-nav-bar>

【问题讨论】:

  • 您可以为样式添加自定义类并赋予其样式。
  • 我试过了。没有运气。
  • 你给了!important 吗?
  • 你能创建 fiddle 或 plnkr 吗?会看看

标签: ionic-framework ionicons


【解决方案1】:

像这样声明你的按钮

<button class="button button-icon icon ion-android-notifications"></button>

将此类添加到您的项目 css 文件中。

.bar .button.button-icon:before {
    font-size: 40px;
}

【讨论】:

  • 请试试这个:.bar .button.button-clear .icon:before { font-size: 40px} 在你的问题中声明的按钮。
  • 您能否在开发者控制台中调试 html 代码,看看您是否在 &lt;i&gt; 标记中包含 ::before。如果它在那里,选择它并在样式窗格中尝试font-size
  • &lt;i&gt; 标签中有一个::after。我已经尝试过了,没有运气...:/
  • Please check this&lt;i&gt; 标签中有一个::before,而不是::after。我用的是你的 1.2.4 版本。
  • 抱歉,终于可以了。错误实际上是我在 LESS 中编写选择器的方式。我使用了错误的伪选择器语法并更正了该问题...
猜你喜欢
  • 2014-10-14
  • 2017-01-11
  • 1970-01-01
  • 2020-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-10
相关资源
最近更新 更多