I have following code:
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>
Which producing following output:
I would like to change used icons for the custom icon (48×48 px).
How can I do it in right way in Ionic?
I tried to follow the instructions in this topic, but without luck.
Exist easy way to solve your problem, just put in your .js this:
$ionicConfigProvider.backButton.icon('my-back-button');
(Please see $ionicConfigProvider documentation here)
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}
You can run this example in this LINK
Another solution can be this (using only CSS):
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 48px;
}
See this example here.
Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.
I hope this information is useful to you.
Just do it! :)
<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>
Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!
But if you want to change the default text too.. you can do it different:
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>
Ref: http://ionicframework.com/docs/api/directive/ionNavBackButton/
If you are using ionic 5
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button icon="chevron-back-outline"></ion-back-button>
</ion-buttons>
<ion-title class='text-center toolbar-text'>Title</ion-title>
</ion-toolbar>
It may be late for the answer but for the latest version of ionic(5.4.16) at this date
following way would save much time
<ion-nav-buttons side="left">
<button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>
hope it will help someone
Related
I try to add a sidenav from Angular/Material to my website. All works fine expect the backdrop : it didn't appear on the main page. Find my code here : https://plnkr.co/edit/DMMz9dMoZasfMExWgjSD?p=options (first time using this tools, all advices are welcomed !)
In menu.component.html :
<md-toolbar>
<div class="sidenav-button">
<button type="button" md-icon-button (click)="sidenav.toggle()">
<md-icon>reorder</md-icon>
</button>
</div>
</md-toolbar>
<md-sidenav-container fullscreen class="sidenav-container">
<md-sidenav #sidenav mode="push" class="sidenav left-nav" opened="false">
<md-nav-list>
<a md-list-item>
Home
</a>
<a md-list-item>
Channels
</a>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
I just copy/paste the example from the official documentation (https://material.angular.io/components/sidenav/overview) with no result..
Thanks
I know it's been months since this question was asked. Just came across it so decided to answer it since no solution was given.
Import one of the angular material theme to your style sheet, doing so should fix the issue.
example - add
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
to your styles.css
https://material.angular.io/guide/theming
Can't find the right words to explain so here's a code example:
<button class="btn btn-default">
<i class="glyphicon glyphicon-alert"></i>
<span>button</span>
</button>
<button class="btn btn-default">
<span>button</span>
<i class="glyphicon glyphicon-alert"></i>
</button>
Two buttons, one with a glyphicon at front, one with glyphicon at end
Now let's say we want to add more of a gap between the word and icon:
.btn {
> .glyphicon:first-child {
margin-right: 15px;
}
> .glyphicon:last-child {
margin-left: 15px;
}
}
Works nicely like so: http://codepen.io/anon/pen/wzxRPw
My question... How would this be done without the extra span around the words?
If I remove the span then the glyphicon is the only element, so it's treated as both the first and the last
Edit: Note: My intention in the question is to find out how/if this can be done without adding an extra class, and without the span tag.
I'm aware that maybe the ideal solution is to keep the spans or add a class, I just thought perhaps there was a way to do this in CSS that I had no knowledge of (I'm still learning)
I feel like you're trying to eliminate code that really doesn't need to be eliminated (that's just my opinion). No matter what you do, if you don't wrap the text in a span tag or something of that nature, there's only going to be 1 child element of the actual <button>. Meaning, you won't be able to target anything other than that element without explicitly setting a class or inline styles. The span tags are a great solution, but if you insist on getting rid of them you have a couple of other options (however, I think the span tag is the best):
Create a CSS class that defines margin offset and set that to the according button. So, you'd set a class like .margin-left to one and .margin-right to the other
You can write inline styles for each of the glyphicons.
Like I said above, I think you have the best solution of your options. I don't think there is anything else you can do.
The only reasonable solution without span is to add a class:
<button class="btn btn-default icon-on-left">
<i class="glyphicon glyphicon-alert"></i>
button
</button>
<button class="btn btn-default icon-on-right">
button
<i class="glyphicon glyphicon-alert"></i>
</button>
and style it appropriately. But that creates maintainability issue: while changing content of the button you need to change its class in sync.
I'm not clear what you exactly want to get as the result, still ill tell u some ideas you have to decide whether it suits ur need or not.
If you can you can add between glyphicon and the span
If you remove only span tag then you can set respective margins for span tag instead of glyphicon
I want to put an online counter on my (tumblr) blog.
I get a script as a result.
I know where and how to add that code, but I'm wondering how to make this link/script unclickable? Otherwise you can click on it and view a map of all the people that are currently online and I find that rather creepy.
How can I make this unclickable?
Easy CSS way: add a css-class to the document.write-span-tag part of the code which is inserted to your document via the code snippet you included:
<span id='o_"+fhs_id+"'></span>
change to
<span class='unclickable' id='o_"+fhs_id+"'></span>
and add a CSS rule to where ever you have your CSS like this:
.unclickable {
pointer-events: none;
}
(works in most browsers, also internet explorer 10 and newer.
for older browsers you'll probably need a javascript solution)
javascript solution:
add onClick='return false' to the same snippet part:
<span id='o_"+fhs_id+"' onClick='return false'></span>
<a class="btn" href="http://freehostedscripts.net/oc.php?id=SUQ5MDAwMDAwMXxmcmVlaG9zdGVkc2NyaXB0cy5uZXR8MA==" title="319 Online [FHS]" target="_blank">319 Online Users</a>
so that's what you have you can do
<a class="btn" onclick="return false"...
I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?
For example I use a template like this:
<ion-view view-title="HelloWorld">
Now I want that Hello appears in red color and world in white color.
My main problem is that I can't get an access via css to the view-title.
Try this,
<ion-view>
<ion-nav-title>
<span style="color:red">Hello</span>World
</ion-nav-title>
</ion-view>
This solves the problem of modifying the view-title:
<ion-nav-title>
<span class="red">Hello</span>World
</ion-nav-title>
In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).
<ion-nav-title>
<div>
<span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
Your App Title
</div>
</ion-nav-title>
I'm trying to implemented a button just like the one demontrated in the example page of fontawesome, whose code is:
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>
Version 4.3.0
</a>
It works but only when the second line is no more longer than the first one.
So what causes the weird phenomenon and how to fix it?
Thanks.
Edit:
There is a running demo over here.
This is a single page app and the broken btns is over the second scene.
The problem comes with white-space: nowrap;. Bootstrap sets it on .btn. In most cases the text in buttons is on one line. In your case it must be on two. So, add a custom class to the button and overwrite it, like this:
.btn-custom {
white-space: normal;
}