Span elements still visible after display:none; - html

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>

Related

How to resize the width and height of SVG social icons?

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

Font Awesome background + Size

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>

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.

Font-Awesome stack not working correctly?

Weird problem with Font Awesome. I'm trying to make a larger circle around my social media icon.
If I change the first stacked icon to a size larger than 2x, it reverts back to the 1x size.
This code works:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
This code doesn't:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-3x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
If I use 3x or 4x, etc, the lower image gets set back to the normal size. Is this a bug, or am I doing something wrong here?
Using Font Awesome v 4.1.0.
EDIT - because this note keeps getting views / comments. My problem was that font-awesome only has the 1x and 2x proportions, where I wanted a much larger background image and a smaller icon (at more like like 4x).
This confused me too until I re-read the instructions a few times:
"You can even throw larger icon classes on the parent to get further control of sizing."
So you leave the icons alone and simply swap .fa-lg for .fa-2x on the parent and the child icons grow proportionately.
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Fairly old solution and lots of similar comments above but wanted to tell one thing I ended up doing in case anyone encounters a similar thing. I needed the the outer font to be the regular size and the inner to be smaller. I didn't feel like creating a class for this since it's only used in a single place. I ended up just adding a style class to the inner font.
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x" style="font-size:9px"></i>
</span>
If you have a 1 off that you need something similar then you could consider the above or create additional classes to do it if you are using in lots of places. If I were to create classes, I would had done something similar to (untested)
fa-stack-xs {font-size:.6em}
fa-stack-sm {font-size:.8em}
So, they could be used like
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x fa-stack-sm"></i>
</span>
I didn't see in the documentation anything like this so my apologies if I missed it.
To get it to work as I expected it to, I changed font-awesome CSS file. At line 168, it looks like this:
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
Notice that the stack only has 1x & 2x options. So I added a 3x & 4x.
.fa-stack-1x,
.fa-stack-2x,
.fa-stack-3x,
.fa-stack-4x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-stack-3x {
font-size: 3em;
}
.fa-stack-4x {
font-size: 4em;
}
You may have to tweak a bit more to get it to line up just right. The higher the em's go, the less they line up correctly in different browsers.
But, in the end, I ended up using a border because we wanted to do something different on phone sizes, and it was simpler to edit that CSS in the #media queries.
The class fa- thin-circle-seems to only support 2x, use CSS (font-size)
.dimensioni_fix {
font-size: 40px; /* EDIT THIS */
}
http://jsfiddle.net/itpao25/8yPDh/
It may not solve your problem but is this the kind of effect you are looking to create?
<span class="fa-stack fa-2x">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
Because font-awesome clearly specifies 1-x and 2-x for stacking and then using larger parent classes for bigger stacks.
From: http://fortawesome.github.io/Font-Awesome/examples/#stacked
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.