Font Awesome icons not working as links - html

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/

Related

How to add tooltip on top of font-awesome icon?

I recently upgraded my font-awesome and ng-bootstrap, after which the tooltip has stopped working. Here's the code-
<i class="fa fa-info-circle px-1" aria-hidden="true" [ngbTooltip]="'Tooltip which shows on top'"></i>
The same code was working earlier before the update. Can anyone help me with this issue?
Update:
I enclosed the <i> tag with a span tag and put the ngbTooltip directive in span tag only. It works with this "hack"!
This should not be that hard have you tried the way Angular Bootstrap shows?
<button type="button" class="btn btn-outline-secondary me-2" placement="top" ngbTooltip="Tooltip on top">
<i class="fa fa-info-circle px-1" aria-hidden="true"></i>
Looks like you missing placement?

Adding FontAwesome icons to links produces artifacts

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>

Span elements still visible after display:none;

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>

How do I decrease the size of a font-awesome icon?

What is the best way to decrease the size of a font awesome icon. There is a fa-3x, etc... to increase the size. Is there a class to decrease the size?
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:
.fa {
font-size: 12px;
}
There are two Font Awesome classes to use if you need something simple: fa-xs and fa-sm.
The size equivalents are:
fa-xs: .75em
fa-sm: .875em
Sizing Icons | Font Awesome (more informations here)
Font-Awesome icon size modification:
"font-size" property in "style" attribute:
<i class="fas fa-search" style="font-size: 25px;"></i>
"font-size" property in CSS stylesheet (like the accepted answer shows)
.fa {
font-size: 12px;
}
HTML tags
<small>
<i class="fas fa-search"></i>
</small>
Using Fontawesome classes so that the icons take a size relative to their parent elements:
<i class="fas fa-search fa-sm"></i>
<i class="fas fa-search fa-lg"></i>
One way is your internal CSS class or use default Font Awesome class:
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-md"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
and keep going wit fa-4x and so one.
The Docs for smart use icons can be found here Font Awesome Docs Sizing and css you could use will find documented there as well.
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:
::before {
font-size: 130px;
}

Wordpress Font Awesome Icons CSS Padding Issues

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.