I would like to set custom icon (ionicons) size for this code:
<button class="button button-icon icon ion-stop customIconSound"></button>
For class customIconSound i tried following:
button.customIconSound,button.button-icon {
font-size: 52px !important;
color: #fff;
line-height: 55px!important;
}
But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).
How can i solve it please?
Thanks for any advice.
Lucas was close but the correct syntax is this one
button.customIconSound:before {
font-size: 22px !important;
}
If you didn`t solve your problem yet or for people dealing with it in future.
You have to change css style for i pseudo element :before
button.customIconSound i:before {
font-size: 52px !important;
}
Your example is working here.
Maybe your problem is caused by something else.
PS: If you want only to resize the icon this css line is enough.
.customIconSound {
font-size: 52px;
}
Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:
<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>
Related
I am using tooltip from ngx-bootstrap with this code
<button tooltip="Add column before" container='body' placement='bottom' containerClass='tooltipClass'>
<i class="plus"></i>
</button>
and code for tooltipClass is
.tooltipClass{
z-index:100;
color:green
}
The tooltip is beneath the row Numbers and that is because of the z-index on rowNo. but I am adding greater z-index to the tooltip but the class is not getting added to it.
Any ideas what should I do?
Place .tooltipClass class in the root style-file it will work!
I was hitting this same issue, but the solutions above weren't working. Updating the global scss variables of ngx-bootstrap was how I fixed it.
This updates your inner tooltip.
.tooltip-inner {
background-color: #333 !important;
color: green !important;
}
This updates your arrow depending on position.
.bs-tooltip-bottom .arrow::before{
border-bottom-color: #333;
}
I have some button styling, which applies when the button has the disabled attribute.
However, I also have a .loading class that I'd like to apply to buttons.
I want the disabled styling to apply only if the button does not have the loading class.
Please see my JS Fiddle: https://jsfiddle.net/pbcykx5L/
I'm imagining something like this, but it doesn't work. Is there a way of doing this?
.btn:not(.loading):disabled {
background-color: #cdd9c3;
border-color: #cdd9c3;
text-shadow: none;
cursor: not-allowed;
}
It does work. In your fiddle, there is no difference in the styles being applied to .btn:not(.loading):disabled and .btn:disabled. If you change the background color of one to red, you can see the CSS is being properly applied.
.btn:disabled {
background-color: #cdd9c3;
}
.btn:not(.loading):disabled {
background-color: red;
}
<button class="btn">Button</button>
<button class="btn" disabled>Button (disabled)</button>
<button class="btn loading" disabled>Button (disabled and loading)</button>
<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i>
works
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px;
}
doesnt work
I've never had this issue before. Any idea?
Yes, I do have the font-awesome css correctly linked.
I believe the font-size is already defined for the icons in the font-awesome.css file. Adding the style tag to the html code overrides these predefined classes. Try typing !important after defining font-size in the css to explicitly override. For example:
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px !important;
}
Like #developernator stated, you can also use the predefined classes. However, I find that most of the time the right size falls between the sizes of these classes.
The class uses first inline css then internal css and then external css
Your font awesome might have already given inline css either remove inline css or
do-
font-size: 50px !important;
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I'm new to CSS and I'm trying to add a background image to a button. I have a simple input button that I'm using as a toggle for displaying a div. I want to put an image in the button. I'm using the following HTML.
<input type='button' id='toggleButton'>
When I view this in my web page in Firefox 9.0.1 it looks great:
I applied the following style to it to add my image:
#toggleButton {
background-image: url("plus.png");
background-repeat: no-repeat;
background-position: center;
}
As soon as I apply the background image the button becomes very plain:
I used Firebug to examine the computed style of both buttons and it didn't show any difference other than the style I appled and some minor changes in border width (from 2.5px to 1.66667px). I added border-width: 2.5px; to the style and it didn't help.
My image has an alpha channel and only the black of the plus sign should show. My understanding of CSS is that the original button's style should still be applied and my button only adds the background image. I expected to end up with a button that looks approximately like this:
How do I add the background image and keep the fancy button look?
How about try something like this if you just want to add a plus symbol:
Html:
<input type='button' id='toggleButton' value="+" />
CSS:
#toggleButton {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
text-align: center;
padding: 3px;
color: #444444;
}
Please try making your button picture to circular bead.