gpt4 book ai didi

ionic-framework - Ionic:更改 ion-navicon 颜色

转载 作者:行者123 更新时间:2023-12-04 03:19:24 28 4
gpt4 key购买 nike

我有一个导航栏:

    <ion-nav-bar class="bar-green-mint" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>

<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon menu-icon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>

我想更改导航图标的颜色。对于“普通”图标,例如:
<i class="icon menu-icon ion-home"></i>

我只需要添加css:
.menu-icon {
color: white;
}

但这不适用于导航图标。

那么如何将它的颜色设置为白色呢?

最佳答案

这是来自 CodePen 的一个工作示例关于 CSS 中的变化实际上是如何工作的。代码在这里复制/粘贴(我使用橙色而不是白色,只是为了证明这一点)。

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

});
.menu-icon{
color:orange;
}
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>
<body class="padding" ng-controller="MyCtrl">

<div class="botones">
<div class="row">
<div class="col">
<button class="button button-block button-positive"><i class="icon menu-icon ion-home"></i>
Click me
</button>
</div>

</div>
</div>
</body>
</html>


现在,由于您没有看到此更改,因此您必须显示代码,说明您在何处进行 CSS 更改。你可能在使用 SASS 吗?如果是这样,那么您将不得不更改 sass 文件。

检查是否正确更改 CSS 的最佳方法是检查按钮(Firebug、Chrome 开发工具)并查看是否应用了正确的 CSS。

关于ionic-framework - Ionic:更改 ion-navicon 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30465136/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com