Using Visual Studio Code the following simple embed of a FA icon in version 5 produces a very small underline artefact in a browser.
<i class="fab fa-twitter"></i>
The single white space before the closing </a> tag is the culprit. An obvious solution is not to use a space! However if using a code editor code formatting will inevitably produce plenty of white space which although reduced by the browser to a single white space the artefact will inevitably appear.
The only solution I have is to use a suitable CSS selector to prevent the underline occurring.
Can anyone suggest anything else?
That's definitely not your editor that's formatting oddly, it's how the browser renders an anchor when it is nested within an element and is at default styles. The default styles are:
a {
text-decoration: underline;
display: inline
}
If you overwrite either one of these properties, you shouldn't see those artifacts. Any of these particular styles will fix the problem:
a {
display: inline-block; /* or block */
text-decoration: none
}
In the following Demo, click the top 3 icons to toggle between the styles.
Demo
#bk:target {
display: block
}
#ib:target {
display: inline-block
}
#td:target {
text-decoration: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artifact</title>
<meta name="viewport" content="width=960">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
</head>
<body>
<p>Observe the small artefacts in the first 3 icons when formatted...</p>
<a href="#bk" id='bk'>
<i class="fab fa-twitter fa-5x"></i>
</a>
<a href="#ib" id='ib'>
<i class="fab fa-facebook-f fa-5x"></i>
</a>
<a href="#td" id='td'>
<i class="fab fa-pinterest fa-5x"></i>
</a>
<p>...and none in the next three.</p>
<i class="fab fa-twitter fa-5x"></i>
<i class="fab fa-facebook-f fa-5x"></i>
<i class="fab fa-pinterest fa-5x"></i>
<p>The first set of 3 icons are modified to demonstrate that the 3 CSS properties can fix the artifacts. Simply click any of first 3 icons and observe the removal of that particular artifact. The links are using the `:target` pseudo-class for this interaction
so all three behave as if only one of them can be active at a time (like a group of identically named radio buttons.)</p>
</body>
</html>
Related
I have some font awesome icons that I want to change to a different color but for some reason it will not work. Here's my html and css:
HTML
<span><i class="fas fa-globe fa-5x change-color"></i></span>
CSS
.change-color {
color: #3993e5 !important;
}
I fixed it.
I just had to wrap the icon with a div
<span><div><i class="fas fa-globe fa-5x change-color"></i></div></span>
Will if you using the js file from FontAwosem you should know that this I HTML tag will be removed and replaced with SVG tag so all you need to do is say something like that in your CSS file
svg {
color: white;
}
Be sure that your icon font-family is Font-awesome.
.change-color {
font-family:FontAwesome;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fas fa-globe fa-5x change-color"></i></a>
I have four span elements that serve as Font Awesome (icon font service) stacks meaning that they each contain two font-awesome "i" elements.
<span class="fa-stack fa-2x left-arrow-button portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x right-arrow-button portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x left-arrow-button-2 portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x right-arrow-button-2 portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
</span>
I created a CSS media query at a min-width of 1290px, and wanted to hide these span elements (and their children of course) starting at this query size.
So, I added (at this query size) the class "portfolio-arrow-button" to all of these span elements and gave them a declaration of display: none;
This didn't work.
Knowing that when it comes to making style overrides to Font Awesome icons it sometimes requires using the :before pseudo selector, I tried:
".portfolio-arrow-button:before", but to no avail.
What eventually worked to hide the buttons was: targeting each "i" element, within their parent span element, and using the :before pseudo selector, then using the "display: none;" declaration.
.button-circle-background:before, .left-arrow-img:before, .right-arrow-img:before {
display: none;
}
Although I'm glad that this hid the "buttons" themselves, I would really like for the span elements to be gone from the page entirely also.
No they are not visible, but when inspected with the debugger, they are still there (the span containers, not their children).
Anyone have any ideas on how to get rid of them or why this is the case?
Help is greatly appreciated, thank you!
krzychek is correct in the answer above (main.css is overwritten by font-awesome-css.min.css) but if you cannot change the order of the files, then here's another way to do it:
CSS
#Portfolio > span {display:none;}
as I can see in dev tools, both styles are being applied to element, but one from font-awesome-css.min.css is chosen.
Is main.css placed after font-awesome-css.min.css?
I'm not CSS guru, but my guess is that main.css is placed before other css and therefore overridden by following rules :P
Also you can add !important directive after display:none. However it is smelly and better to avoid.
Add this code inside the head of your web page:
<style>
span.fa-stack { display:none !important; }
</style>
I want to resize the social icons on the top header of this website http://petlet.net.au/
I thought that the logo's are images but I think these logos are from a library or from external because when you inspect the code there's no <img src> code.
This is the code:
How can I resize the social icons?
Use fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-facebook-square fa-lg"></i> //smallest
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-facebook-square fa-5x"></i> //biggest
Whenever icons are used as svg icons you can resize them by just changing font-size. They can be colored, not colored, multiple shapes, sizes, whatever.
.header .fa {
font-size: 15px; // you can increase or decrease font size as per your needs.
}
.header .fa-facebook-square {
font-size: 18px; // you can change font-sizes of different icons indiviually
}
Using font-size css property you can resize the font-awesome fonts.
Try this:
.top-header-content a{
font-size:20px;
}
For newer version use icon-2x, icon-3x etc.
<i class="icon-camera-retro icon-4x"></i>
Refer http://fontawesome.io/3.2.1/examples/
Just use font-size property of CSS to resize the social icon buttons
A long time ago I made this with font awesome:
For the life of me, I can't remember how I done it. I tried to replicate it using this:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa fa-home fa-stack-1x"></i>
</span>
I used this resource for the above code: Stacked Icons, Twitter
The problem with this is that the house is too big, and the background isn't the same as the one I made ages ago (think #fff). On the fontawesome website it appears to have a light background, but then when implementing it into my site (background of the site is #1F1F1F), it seems to take the same background as the site.
Does anyone know how I was able to do this previously and now I'm struggling?
Problem: too big
You're using the fa-lg class. This makes it oversized. Remove this.
Problem: wrong background
Use the fa-square class (a solid rounded square, instead of outline like fa-square-o), and use CSS to make it light (with color: lightgrey).
(In the below example, I also darkened the background to better show the light background of the square).
body {
background-color: black;
}
.light {
color: lightgrey;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x light"></i>
<i class="fa fa fa-home fa-stack-1x"></i>
</span>
I have trawled the internet looking for a fix and i still cannot get padding to work on my FA Icons in a wordpress theme.
Caution, I am novice:
So, the icons are social media icons, using FA, and they are placed in a widget in the footer of the site.
I think i have assigned a class to the icons "social" but I have placed:
.social {
padding-left:20px;
}
In all style.css or custom.css or theme related .css's I can find and the icons still only have around 3px of padding, widget code is as follows:
<p>
<a target="_blank" href="link"><i class="fa fa-twitter-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-facebook-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-instagram fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-pinterest-square fa-4x" class="social"></i></a>
</p>
I'm sure I am missing something simple?
Regards,
Thomas
Add the social class to the same attribute:
<i class="fa fa-pinterest-square fa-4x social"></i>
Change the css property to:
.social {
padding-left:20px !important;
}
Please note that the css properties are assigned in the order they were defined in the css files. You must be sure that the .social is the last defined, in order to assign the padding-left you need.