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;
}
Related
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
For the clickable span I want the inside of the glyphicon to be white and not show the elements behind it. How do I do that?
<ul class="summary">
<li></li>
<li class="summary-pendingitem">
<input id="input-newrating-text" class="summary-pendingitem-text"
placeholder="rating's text"/>
<input id="input-newrating-color" class="summary-pendingitem-color"
placeholder="rating's color"/>
<span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
</li>
</ul>
.summary{
position: relative;
list-style-type: none;
max-width: 18em;
margin-top: 1em;
}
.summary li{
border: 1px solid gray;
}
.summary li input{
margin: .3125em;
width: 96%;
}
#btn-addrating{
position: absolute;
top: -0.313em;
right: -0.313em;
font-size: 2em;
color: #77dd77;
}
Generally speaking, you can't really modify any icon or glyph itself any more than you can slightly alter the presentation of the character 'R'. Icons are just glyphs or characters for a given font.
However, all elements can have both a both a color and background-color property. So, in this case, you can just add a background color to the glyphicon element, which will apply a white rectangular background. In this particular instance, if you'd like the background to 'hug' closer to the icon which happens to be a circle, you can apply a border-radius of 50% to turn the element into a circle. So you can accomplish like this:
.my-plus {
color: #006800;;
background: white;
border-radius: 50%;
}
Alternatively, you could compose icons by stacking two or more icons together.
You can stack icons natively in Font-Awesome or by adding a little CSS to Bootstrap's Glyphicons:
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
Demo in jsFiddle
In new FontAwesome 4.0.0 there is css styles for stacked items.
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-square-o:before {
content: "\f096";
}
I want to do it only without using nested span and i, just only with some css-classes
.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />
What is the simplest method to achieve the same result (using fa content classes ?)
Update:
or is something like the following possible ?
.myclass1:before { content: '<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>' }
<span class=".... myclass1" />
(edited)
This is not possible with fa-* classes, because there is no possibility to determine the order of stacked icons: in CSS class="foo bar" is the same as class="bar foo"
On the other side, you can define your own class and style it to achieve one chosen stacked icon - i.e you'll need one custom class per every pair (e.g fa-times stacked on fa-square).
In order to achieve this, use :before and :after selectors (and absolute positioning - little demo).
It also seems (tested using background property) that :after element is on top of :before if you use absolute positioning. In case that's not true, you cvan always use z-index to order those two elements manually.
About your update, if something like the following possible ?
.myclass1:before {
content:'<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>'
}
<span class=".... myclass1" />
It's not, as it is explained there : CSS content property: is it possible to insert HTML instead of Text?
If you want to keep control of the two stacked icon in a single HTML tag you can get it with something like that.
div{
display:flex;
justify-content: center;
position:relative;
}
i:before {
content: attr(icon-before); // "\f099";
position: absolute;
font-size: 1.5em;
margin:0.1em;
}
i:after {
content: attr(icon-after); // "\f096";
position: absolute;
font-size: 2.1em;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<!--https://stackoverflow.com/questions/22600464/html-special-characters-in-css-content-using-attr-->
<div><i class="fa" icon-before="" icon-after=""></i></div>
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>
Is there is a simple way to stylize the Fontawesome icons background properly?
I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.
The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):
.icon-remove-sign {
padding: 0;
border-radius: 25px;
color: white;
background-color: red;
}
But it's not enough, we can see the red background at the top of the icon.
How would you do it ?
With fontawesome you can use stacked icons like this:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
It feels a little hacky, but I managed to get it working here:
http://jsfiddle.net/3FvxA/
display:block and giving it a height and width seems to be the secret.
Assuming that your HTML looks like this:
<div class="social-circle">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-pinterest-p" href="#"></a>
</div>
You can do something like:
.social-circle [class*="fa fa-"] {
width: 25px;
height: 25px;
color: white;
background-color: grey;
border-radius: 25px;
display: inline-block;
line-height: 25px;
margin: auto 3px;
font-size: 15px;
text-align: center;
}
.fa-facebook:hover {
background-color: #3B5A9B;
}
.fa-twitter:hover {
background-color: #4FC6F8;
}
.fa-pinterest-p:hover {
background-color: #CA2128;
}
See the example here : http://jsfiddle.net/k69xj2n8/