I am using Font Awesome to create a circle around a number. HTML is as follows:
<span class="fa fa-stack fa-3x" >
<i class="fa fa-circle-thin fa-stack-1x" ></i>
<strong class="fa-stack-1x" >2</strong>
</span>
Here is the jsfiddle demo:
http://jsfiddle.net/mddc/dkgzLrLf/2/
As seen in this demo, there is quite space around the circle. How can I remove it elegantly? And position it in the upper left-corner of its container (the div tag)?
Thanks and regards.
Couldn't see why bother with Font Awesome since you only want a border around a number,
so here is a simple css solution
HTML:
<strong class="nbr">2</strong>
CSS:
.nbr {
display: inline-block;
font-size: 24px;
line-height: 1.2em;
width: 1.2em;
border: 2px solid #000;
border-radius: 50%;
text-align: center;
}
Keep the line-height value same as the width (em or px), to have a perfect circle
Here is the updated Fiddle https://jsfiddle.net/dkgzLrLf/3/
Related
I have 3 spans:
.see-more{
text-align: right;
padding-right: 20px;
display: inline-block;
}
.see-more .see-more-text{
display: inline-block;
padding-top: -2px;
}
.see-more .fa-angle-right{
display: inline-block;
margin-right:-6px;
}
<div class="see-more">
<a href="ground-stabilisation">
<span class="see-more-text">see more</span
<span class="fal fa-angle-right"></span>
<span class="fal fa-angle-right"></span>
</a>
</div>
efects of this code looks like this:
I am trying to lower the angle-right icons so that they are in the middle of the "see more" text, unfortunately in all tries always the whole div is moving , not the elements inside. Any ideas?
Try margin-top :20px (try to set the number as required) in fa-angle-right css
I am using font awesome to make some icons. I've most recently started playing with stacked icons. I want to achieve an effect, similar to the top icon being a cut-out of the base icon. Meaning that the background color of their parent should be visible through the "hole" in the base icon.
Initially, I tried to set the top Icon to be transparent, but that only revealed the full base icon, with no stacked icon result whatsoever.
Is there a way to achieve this, maybe by inheriting the parent element's background color, and setting it as the foreground color of the top Icon?
HTML:
<div class="square">
<span class="fa-stack ">
<i class="fa fa-file fa-stack-2x fa-inverse"></i>
<i class="fa fa-refresh fa-stack-1x " style="margin-top: 6px; "></i>
</span>
</div>
CSS:
.square{
background-color: rgb(51, 179, 77);
width: 32px;
height: 32px;
}
And fiddle, (where I am trying to make the black "refresh"-icon the same color as the background base) http://jsfiddle.net/cat9zxzt/
EDIT:
I know I could just add the color to the icon element manually, but what I would like, is a generic solution that would work with any background color that I might happen to put this stacked icon on top of.
You can (sort of) by setting the text color and using currentColor for the background.
The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.
.square {
color: rgb(51, 179, 77); /* text color */
background-color: currentColor; /* equals current text color */
width: 32px;
height: 32px;
}
JSfiddle Demo
Just add another class to the refresh icon as seen in this Fiddle
HTML
<div class="square">
<span class="fa-stack ">
<i class="fa fa-file fa-stack-2x fa-inverse"></i>
<i class="fa fa-refresh fa-stack-1x green-color" style="margin-top: 6px; "> </i>
</span>
</div>
CSS
.square{
background-color: rgb(51, 179, 77);
width: 32px;
height: 32px;
}
.green-color{
color: rgb(51, 179, 77);
}
I am trying to manually stack Soundcloud icon and show it on a square as it is with fa-facebook-square, but my Soundcloud icon get created under the square.
This is my code so far:
<div class="row">
<ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
<i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
<i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
</div>Soundcloud
</li>
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
<i class="fa fa-facebook-square"></i>
</div>Facebook
</li>
</ul>
</div>
Preview: http://jsfiddle.net/gvdr7889/
If there is any other alternative/easier way, I am open for your suggestions.
Instead of setting margin-top and margin-left, use top and left. I used 5px and 7px, but you can adjust it to get the positioning you like.
http://jsfiddle.net/gvdr7889/1/
Look at this fiddle.
What I've done is change it so that the div you made is the background, which has the orange-red color, the size and the border radius. Then the normal fa-soundcloud fa-1x fa-inverse in it in white. Might have to play around with the sizes and colors, but it seems to me like that is what you're looking for.
There is also a Github issue requesting a proper soundcloud-square icon, I'd suggest letting them know you want it too over there
I want to create a custom icon using font awesome overlays, which I can easily using the following html
<span style="width: 18px; height: 18px; line-height: 18px;" class="fa-stack">
<i class="fa fa-circle fa-stack-1x" style="color: rgb(20, 77, 99); font-size: 18px;"></i>
<i style="font-size: 12px;" class="fa fa-question fa-stack-1x fa-inverse"></i>
</span>
I can simplify it a bit my removing the inline CSS, but what I would like is to be able to wrap the whole think in a css class for ease of reuse, so that I can just do something like
<i class="fa fa-my-icon"></i>
The problem is that I have no idea how to create a CSS rule that generates the DOM elements needed. Is this possible, and if so any pointers as to how it can be done? I'm not too familiar with less, but a solution based on that would be fine too.
I know how to do it using javascript, but I want to avoid that if possible.
Ok, figured it out with less. In case anyone else is trying to do this:
#import "font-awesome/less/variables.less";
#icon-size: 18px;
.icon-mixin() {
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
left: 0;
}
.my-icon {
position: relative;
display: inline-block;
width: #icon-size;
height: #icon-size;
line-height: #icon-size;
vertical-align: middle;
color: blue;
&:before {
content: #fa-var-circle;
font-size: 18px;
.icon-mixin;
}
&:after {
content: #fa-var-question;
vertical-align: middle;
color: #fa-inverse;
.icon-mixin;
}
}
I've had a ShareThis plugin installed on my blog for quite some time now but have only just noticed that not all my 'share icon's' are displaying inline.
I've tried using padding-bottom and margin-bottom but that didn't accomplish what I was hoping.
Would any of you be able to shed some light on what I'm doing wrong?
Code snippet:
<div style= "display: inline; float: left; padding-left: 4px; padding-bottom: 4px;">
<span st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' </span>
<span st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
</div>
Note, in the preview window, the icons remain inline. Very odd.
Replace this CSS class in your script.
.stButton {
position: relative;
z-index: 1;
text-decoration: none;
color: black;
display: inline-block;
cursor: pointer;
margin-right: 3px;
margin-left: 3px;
font-size: 11px;
line-height: 26px;
}
As you can see I have changed line-height to 26px and now it can fit correctly.
I ended up solving my problem using this method: Vertical alignment of ShareThis icons
It's worked although displays oddly in the preview panel.
My next problem is the alignment of the disqus comments. I've tried text-align: right and padding to no avail. I also seem to have lost the line that went across the whole column beforehand... See the image and code below.
<div style="padding-bottom:1px; display: inline-block;">
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span style="vertical-align: top;" st_url='{Permalink}' st_title='{Title}' class='st_twitter'> </span>
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
{block:IfDisqusShortname}<div style= "display: inline-block; vertical-align: top;">{lang:View comments}</div>{/block:IfDisqusShortname}
{/block:Date}
Link to image!