I'm using this toggle menu template: http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle .
I have replaced bootstraps glyphicon with font awesome's
fa fa-cog fa-spin
but the cog is spinning out of boundaries as if the center is not on the same line as the text. I can see that there is some issue with thesizing, but I cannot figure out where, any idea what am I doing wrong?
JSFiffle: https://jsfiddle.net/vidriduch/mpw2r8h2/1/
You have a problem in the text indent
.sidebar-nav li {
line-height: 40px;
text-indent: 20px; //Remove this rule and use margin
}
And change this class rules
.sub_icon {
float: right;
margin-right: 10px;
margin-top: 10px;
padding-right: 65px; // remove it
padding-top: 10px;// remove it
}
I finally found how to fix it :
You have to align the icon.
<i style='text-align: center;' class='fa fa-cog fa-spin' ></i>
For me it worked to just add 2px padding to the top.
<i className="far fa-lg fa-spin fa-cog" style="padding-top: 2px" />
Inspect the image tag. The CSS padding-right caused all the issues for me.
I solved this using flexbox, had a similar problem.
Just add:
text-align: center;
display:flex;
align-items: center;
justify-content: center;
Also, because your code is aligned to the left, you will have to add margin-right: (pixels); to align it according to your code.
For me, it just needs
display: flex;
align-items: center;
Eg:
<div class="row">
<label class="col-3">Label col</label>
<input class="col-3 form-control" />
<i class="fa fa-spinner fa-spin " style="display: flex; align-items: center;"></i>
</div>
note: I use bootstrap
Related
Why the button's text size is bigger than div->span's text size when both is set to 1em? How can I make them rendered to the same size?
Now firefox shows me the div's text as 17px high and 20px for the button's text.
.selectDateRangeBtn {
font-size: 1em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 1em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>Some text</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
The font-size is the same but the button is having a default font-family set by the user agent which is different from your div.
Use the same font-family (reset the font property) and you will have the same text size
.selectDateRangeBtn {
font:initial; /* reset the font */
font-size: 2em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 2em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>2019-01-01</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
I would like to do a space between 2 words in css for example:
1 RUNNING DAYS ADMIN#SUPER.BIZ
In HTML there is   but it's not correct to use   I think?
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS <i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ</div>
</div>
How to do that in CSS ?
.sous-titre-bandeau-blanc{
font-family: 'Open Sans', sans-serif;
font-size: 13.3333px;
color: #474747;
padding-top: 14px;
padding-left: 28px;
padding-bottom: 15px;
}
Thank you
You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.
Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.
For example:
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<span>
<i class="far fa-calendar" />
<p>1 RUNNING DAYS</p>
</span>
<span>
<i class="far fa-envelope" />
<p>ADMIN#SUPERBTC.BIZ</p>
</span>
</div>
</div>
<style>
.sous-titre-bandeau-blanc {
display: flex;
justify-content: space-between;
width: 450px;
}
</style>
I would do something like this, if I'm understanding you correctly
<style>
.space-between {
display: inline-block;
padding-left: 3em;
}
.space-between:first-child {
padding-left: 0;
}
</style>
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
<div class="space-between"><i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ<div>
</div>
</div>
Since you already have a .fa icon in the right part of your div just add it some left margin:
.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }
Also, change your far for fa class to correctly display font-awesome icons
I'm writing a "responsive design" layout and it's been kind of a headache so far. I decided to use the :before and vertical-align: middle; workaround to vertically align some text inside 'buttons', and it works on everything, except one button! The thing is, on refresh, Chrome Mobile will sometimes render it correctly, and sometimes it won't; it seems arbitrary, I haven't been able to find a pattern.
Here's how it should not look:
Here's how it should look:
Here's the relevant markup:
<div class="button">
<a href="/login">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-sign-in"></i>
</span><br/>
<span class="button-label">
Log In
</span>
</span>
</a>
</div>
<div class="button">
<a href="/signup">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-user-plus"></i>
</span><br/>
<span class="button-label">
Join Us!
</span>
</span>
</a>
</div>
And the CSS:
.button
{
display: inline-block;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.button a
{
display: inline-block;
height: 100%;
}
.button a:before //So its contents vertically-align
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.button-container
{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.button-icon
{
font-size: 180%;
}
.button-label
{
font-size: 90%;
}
It only happens with the "Log In" button (but I included two of them in case it helps). The buttons are contained within a div that has text-align: right;, in case that's relevant.
It renders well on Firefox Mobile, and on desktop, of course. I tested it on Chrome Beta v42, and the most recent version of regular Chrome Mobile, I guess maybe it's a Webkit thing, but I wonder if it's a known issue, and if there are any workarounds, or at least an explanation as to why it happens.
I have a small problem. When my button doesn't fit table cell, line gets broken. But button in new line looks bad ("sticked" to button above, as in picture). How to make it at least have some neat top margin, to "unstick" it from the top button?!
Here's an example:
And here is the code:
<i class="fa fa-info-circle"></i> Szczegóły
<i class="fa fa-key"></i> Uprawnienia
<i class="fa fa-edit"></i> Edytuj
<i class="fa fa-trash-o"></i> Usuń <!-- this button looks bad -->
a.btn{
display:inline-block;
margin-bottom:10px;
}
Why do you use table-cell? I would recommend display: inline-block;
.container {
margin-left: -20px;
}
.element {
display: inline-block;
margin-right: -4px;
margin-left: 20px;
margin-top: 10px;
}
Tried adding this CSS?
.fa {
margin-bottom: 10px;
}
I want to create a rounded button in BS3 (a perfect circle), with a single fontawesome(4.0) icon in the center.
So far, I have the following code:
HTML:
<i class="fa fa-user"></i>
What would the CSS markup be to make this button a perfect circle?
you can do something like adding a class to add border radius
HTML:
<i class="fa fa-user"></i>
CSS:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
}
in case you wanted to change dimension you need to change the font size or padding accordingly
(Not cross-browser tested), but this is my answer:
.btn-circle {
width: 40px;
height: 40px;
line-height: 40px; /* adjust line height to align vertically*/
padding:0;
border-radius: 50%;
}
vertical center via the line-height property
padding becomes useless and must be reset
border-radius independant of the button size
Boostrap 3 has a component for exactly this. It's:
<span class="badge">100</span>
This is the best reference using font-awesome.
http://bootsnipp.com/snippets/featured/circle-button?
CSS:
.btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}
With Font Awesome ICONS, I used the following code to produce a round button/image with the color of your choice.
<code>
<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>
</code>
I had the same problem and came up with a very simple solution working for all (xs, sm, normal and lg) buttons more or less:
.btn-circle {
border-radius: 50%;
padding: 0.1em;
width:1.8em;
}
The difference between the btn-xs and -sm are only their padding. And this is not covered with this snippet. This snippet calculates the sizes based on the font-size only.
If you have downloaded these files locally then you can change following classes in bootstrap-social.css, just added border-radius: 50%;
.btn-social-icon.btn-lg{height:45px;width:45px;
padding-left:0;padding-right:0; border-radius: 50%; }
And here is teh HTML
<a class="btn btn-social-icon btn-lg btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">
<i class="fa fa-facebook sbg-facebook"></i>
</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">
<i class="fa fa-google-plus"></i>
</a>
It works smooth for me.
Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: http://fontawesome.io/examples/
.no-border {
border: none;
background-color: white;
outline: none;
cursor: pointer;
}
.color-no-focus {
color: grey;
}
.hover:hover {
color: blue;
}
.white {
color: white;
}
<button type="button" (click)="doSomething()"
class="hover color-no-focus no-border fa-stack fa-lg">
<i class="color-focus fa fa-circle fa-stack-2x"></i>
<span class="white fa-stack-1x">1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
To add a rounded border in any button the best way is to add the border-radius property. I belive this class is better because you can add-it at any button size. If you set the height and widht you will need to create a "rouding" class to each button size.
.btn-circle {
border-radius: 50%;
}
<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>