I am using Font Awesome 5 (brands). The tiktok Icon is displayed as a stack of books instead of the stylized T.
Attempted using the local directory of Font-Awesome as well as linking the style with the url.
My other site is displaying the icon properly, using the same stylesheets and font-awesome version.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<a style="font-size: 3vh" class="social-button sb-facebook shape-none sb-light-skin"><i class="fab fa-facebook"></i></a>
<a style="font-size: 3vh" class="social-button sb-instagram shape-none sb-light-skin"><i class="fab fa-instagram"></i></a>
<a style="font-size: 3vh" class="social-button sb-tiktok shape-none sb-light-skin"><i class="fab fa-tiktok"></i></a>
error icon
expected icons
class pulls font-awesome.
Any advise would be much appreciated
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>
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>
I got Font Awesome 5 to work using:
<i class="fa fa-user"></i>
<script src="/js/packs/solid.js"></script>
<script src="/js/fontawesome.js"></script>
But styling the i tag didn't have any effect. So I tried using a web-font instead:
<link rel="stylesheet" href="css/font-awesome-core.css">
<link rel="stylesheet" href="css/font-awesome-solid.css">
<i class="fas fa-user"></i>
and it worked. But shouldn't I be using the svg framework? I'm not a Font Awesome traditionalist. Can you style fonts with different colors, sizes and rotations?
The FontAwesome5 SVG framework converts the tag into the fully rendered SVG code in the source.
The styling of the icon/SVG can be controlled by styling the parent.
<div style="font-size: 200%; color: red">
<i class="fas fa-user"></i>
</div>
This will render the icon at 2x size and in red.
My font awesome icons aren't linking to where I set the href on the a tag. In fact when I inspect them there is no href on the a tag. I have some demo code for you to look at, but on the demo code it does show the href when inspecting it just doesn't link to the page. Maybe if this code is fixed it will fix my issue. Thanks
<a href="https://www.google.co.uk/">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
https://jsfiddle.net/znvfbu9g/
Provide a target attribute to your a tag.
Something on the lines of:
<a target="_blank" href="https://www.google.co.uk/">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
Check updated fiddle.
Do you have the latest CDN attached to you page to display the icons?
http://fontawesome.io/get-started/
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.