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.
Related
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>
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 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
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;
}