Keep the font awesome spinner icon from at the original place - css

When I put the icon fa fa-spinner fa-spin the icon starts itself rotating. Although the spinning dots rotate fine.
Ex :- http://farzikam.cf/a click the submit button and see


Solve it by removing the top / bottom padding from your buttons icon
<button id="btn" onclick="load()">
<div id="btntext">Submitting</div>
<i id="plus" class="fa fa-spinner fa-spin" style="padding: 0;margin-left: 7px;"></i>
</button>


Remove the padding from your icon and add a margin to your button text like:
#btntext{
margin-right: 15px;
}
You should also use classes instead of id´s for that case.


Add this CSS and it should work fine....
#btn .fa-spin {
padding: 0;
}
#btntext {
padding: 0 10px 0 0;
}

Related

Angular Material icon button formatting

This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}

.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m

button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm

How to set padding between mat-icon and button title

<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
Remove Driver
</button>
How to add padding in between mat-icon and button title?
I want to keep the button title in the middle of the button and keep the icon in the left corner.

You can achieve this by adding a padding to your button text instead of the icon.
Add a class for the button text in the template.
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-text">Remove Driver</span>
</button>
Then define button-text in the CSS.
.button-text {
padding-left: 50px;
padding-right: 74px; /* Add 24px to align the text in the center since the icon's width is 24px */
}

For that you need to add span tag for that under button title
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-title">Remove Driver</span>
</button>
Then just add this .button-title in your CSS file for Styling
.button-title{
padding: 5px 50px 5px 50px;
}
This is Example You Can edit or preview Code Here on StackBlitz

Bootstrap 4 Buttonwith iFont icon pushes text outside

I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/

That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/

The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/

just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}

Can I style MenuItem Caption in Vaadin7

Is there any possibility to customize Vaadin 7 Menuitem so that text is in Left side, NOT in right side and it is aligned evenly with icon? Second question is that is it possible to give different style to top level menu than other levels?
Css:
.v-menubar .v-icon {
float: right;
<div class="v-slot v-slot-user-menu">
<div id="menu.ui.UserView.user-chooser" class="v-menubar v-widget user-menu v-menubar-user-menu" tabindex="0">
<span class="v-menubar-menuitem">
<span class="v-menubar-submenu-indicator">►</span>
<span class="v-menubar-menuitem-caption">
<span class="v-icon FontAwesome"></span>
Adam Test
</span>
</span>
</div>
</div>

try to force it:
.v-menubar .v-icon {
text-align: left !important;
}

Try to do this
.v-menubar-menuitem-caption {
//style
}
If you want more css look in the vaadin docs at

How to make a stacked Font Awesome icon have the same width as a fixed width non stacked one?

http://jsfiddle.net/cirosantilli/aZ9g4/3/
The stacked "GitHub Issue" icon is twice as large as the other fixed width non stacked ones, and makes my nav look bad.
Is there a way within the library to make it be the same size without hacking low level CSS properties?
If only there was a fa-stack-half...
If not, what is the best workaround?

Looking at the examples for stacked icons, you can do this by modifying the font-size on the span:
Just add a rule like:
.fa-sm {
font-size:0.63em;
}
With Markup:
<span class="fa-stack fa-sm">
<i class="fa fa-exclamation fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x text-danger"></i>
</span>Github Issue
Fiddle: http://jsfiddle.net/epxtY/

Try adding this CSS
.fa-stack{
width: 1.28571em;
}
.fa-circle-o.fa-stack-2x {
font-size: 1.4em;
top: 2px;
}
.fa-exclamation.fa-stack-1x{
font-size: 10px;
top: -3px;
}
http://jsfiddle.net/aZ9g4/12/

Resources