I'm trying to add a border around individual fontawesome icons (using the Unicode codes). For example, in my CSS file I'm using:
content: "\f008\00a0\f001\00a0\f26c"
But if I try to add a border here, it puts one border around all three icons. Is there a way I can get a border around each of the three icons individually (not the 00a0 spaces).
Thank You
Nope...it's one element (or pseudo-element) with multiple characters...so you only get one border.
It's like trying to put a border round the individual letters in a span...can't be done.
At best, Font-Awesome offers a method of putting borders around icons using stacking but usually only for single icons. Whether you could tweak that is arguable.
Could be a fun experiment.
The way it should be done:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
i:before {
font-family: 'FontAwesome';
}
i.one:before {
content: "\f008";
}
i.two:before {
content: "\f001";
}
i.three:before {
content: "\f26c";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa one fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa two fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa three fa-stack-1x"></i>
</span>
Related
Can you advise how to solve the CSS All Elements (*) error? >I am using VS Code
*{ /*! error - VS Code: media query expected */
margin: 0;
padding: 0;
box-sizing: border-box;
}
Icons is not consistently loaded >is it because of my internet speed or..? >if not, how can this be fixed?
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-youtube"></i>
I have this span:
<span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span>
I changed the colour like this:
.fa-green {
color: #008d4c;
}
However, the hover function does not work:
.fa-green:hover {
color: black;
}
What's wrong?
Your code looks fine. Make sure your hover style is not overridden by other styles or class.
html
<a href="#">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
<a href="#" class="more-power">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
css
.fa-green {
color: #008d4c
}
.fa-green:hover {
color: black
}
a.more-power:hover span {
color: #008d4c
}
Check this out https://jsfiddle.net/ayjwm23d/36/
I'm going mad trying to solve this problem.
So basically I've written a static HTML-CSS page in order to implement it in a Wordpress custom theme.
I've got three social buttons inside the footer, in the static theme they work fine (I'm using webpack with HtmlWebpackPlugin for local frontend development). They're three links inside list elements:
<ul class="li-h li-h-centered">
<li class="s-hover-facebook">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="s-hover-instagram">
<a href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="s-hover-twitter">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
The CSS that drives the whole thing is (SCSS actually, but you get the idea)
&__social {
padding: .5em 2em;
&>ul>li>a {
display: block;
}
&>ul>li {
display: inline-block;
border-radius: 50%;
margin: 0 .2em;
width: 2em;
height: 2em;
line-height: 2em;
background-color: #333;
}
font-size: 1.8em;
}
The result in the static website is:
The result in the Wordpress websate is this:
I really don't know what is going on here, any suggestions?
I am using FontAwesome Icons in my application on a tree structure list. fa-caret-down and fa-caret-right disturbs my pixel like on right to dow it moves content right to 5 pixels during change fa-caret-right to fa-caret-down.
Here is my html code:
<i class="fa fa-caret-down"></i>
CSS:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
/*font-size: inherit;*/
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.fa-caret-right:before {
content: "\f0da";
}
.fa-caret-down:before {
content: "\f0d7";
}
Font Awesome has a fix for this.
Fixed Width Icons
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
Here you can find information on different Font Awesome Features.
ul {
list-style:none;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa fa-caret-down fa-fw"></span>
Fruit
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Apple</li>
</ul>
</li>
<li>
<span class="fa fa-caret-right fa-fw"></span>
Animals
<ul>
<li>Monkey</li>
<li>Dog</li>
<li>Cat</li>
</ul>
</li>
</ul>
You have to remember that Font-Awesome icons are nothing more than simple characters - letters, if you like. The letter 'W' for example is wider than the letter 'I' - equally .fa-caret-down is wider than .fa-caret-right.
To overcome this problem, one solution to this is to define a specific width on your i element to stop different icons from influencing this value themselves:
i.fa {
text-align: center; /* If you want the icons to appear central. */
width: 20px; /* Adjust accordingly. */
}
I am trying to achieve hover animation with font-awesome fa icon-circle.
Problem is "Facebook circle" animation seems comes with delay. How can i achieve faster light on animation without giving smaller number of animation time with transitions.
HTML
<ul class="social-icons">
<li>
<a href="#www.facebook.com/mobge">
<span class="fa-stack fa-3x socialSpan">
<i class="fa fa-circle fa-stack-2x circleIco">
</i>
<i class="fa fa-facebook fa-stack-1x secondIco">
</i>
</span>
</a>
</li>
[...]
</ul>
SCSS
.socialSpan, .circleIco, .secondIco{
-webkit-transition:all 0.4s; /* For Safari 3.1 to 6.0 */
transition:all 0.4s;
}
.social-icons{
li{
a{
color: $sublimeGray;
}
a:hover{
color: $facebookColor;
margin-top: 20px;
}
}
}
Example: http://codepen.io/anon/pen/zaBxE/
Thank you.
You apply a CSS transition to two extra elements here, which may slow the transition.
It concerns socialSpan's children so remove the transitions applied to:
.socialSpan {
transition:all 0.4s;
}
instead of
.socialSpan, .circleIco, .secondIco{
transition:all 0.4s;
}
Demonstration!