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>
Related
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 looking in the devtools and it is revealing the following code:
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
The problem is, I change these in my css file and it won't let me get rid of the grey background color. How can I override it?
Thanks in advance.
EDIT: Ended up being a ui-router issue, not a css issue. Sorry everyone, thanks for the troubleshooting. Changed:
<li ng-class="{active: stateis('app.contact')}" ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
To this:
<li ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
And is fixed
Remove ">" after nav class. Please Try this :
.nav li>a:focus, .nav li>a:hover {
text-decoration: none;
background-color: red;
}
Check out working fiddle
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>
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!