I'm really stuck at this supposedly easy task: I'd like to put one single line of text containing white spaces over an FA icon. Following their instructions works only as long as the text does not contain any blanks. Blanks wrap the text into the next line. How can I prevent this so that there's only one single line of text (no matter how wide) put over an icon?
This creates three lines of text over the solid heart icon - I'd like just one.
.fa-layers {
margin:50px;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
<i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
<span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>
Thanks for any hints.
Simply consider white-space:nowrap;
.fa-layers {
margin:50px;
}
.fa-layers-text {
white-space:nowrap;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
<i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
<span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>
Related
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>
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 want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.
I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?
Thanks!
Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.
Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.
HTML:
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
CSS:
.calendar-text { margin-top: .3em; }
Following code will give a circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
Following code will give a solid circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<strong class="fa-stack-1x text-primary">1</strong>
</span>
Here the text-primary class (from bootstrap) is used to set the colour of the number
To include letters and numbers would make the style sheet for FA way too large and they do not support it ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). so what i do is like such:
.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;
}
then
<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>
this leaves a nice clean font and you can still use the silly i ( em ) to keep trakc of "icons." Plus this keeps all icon type characters within the same elemental scope... (.fa-^)
I believe this thread was for an icon with a circle around it. So you would modify this CSS above to make it a <span> instead of a <button> and creat a block element in your span.
.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}
then
<span class="f-circle"><i class="fa-alph">2</i></span>
You can just do something like this instead :
<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i>
<i class="fa fa-star" aria-hidden="true"> 3</i>
...
I find this works nicely within WordPress widgets (after adding in the CDN styesheet to the header):
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
As an alternative to font awesome and HTML/CSS, find an example you like and create something similar in Photoshop. Export the PNGs. Takes about 10 minutes.
Not that I know off! Actually Font awesome is a font used to render icons only. Here is a list of possible icons Fontawesome-icons.
You could do this in many other ways i would do it using one of this 2 other methods depending on what your looking for. For example...
A simple circle with a number inside, the way I would go would be with CSS, creating a circle and using normal text inside. There are tons of posts/examples in google for that. Here is one : how to create circles with css
If you want to achive this with something more graphic/icon I suggest taking a look at Fontello, this creates a font out of your own svg files. So you could do your own numbers with images as background and render the numbers as icons just like fontawesome does.
Have a good one!
Pancho
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.
There is an icon with a text in front of it. I can align the text in the middle of icon by using style="vertical-align: middle;"
So below works fine:
<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow.
The problem is when we add a <br> the alignment is not work any more ( As the icon is simple character)
<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow </br> I mean very Big!
Please see http://jsfiddle.net/tQYTB/1/
Can you tell me what is the best solution for it!
Use span tag whenever you want to change some portion of the content.......
span {
display: inline-block;
vertical-align: middle;
}
Here you go: http://jsfiddle.net/tQYTB/3/
Basically, wrap the label text in a span
HTML
<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i>
<span class="label">a Big Arrow. <br/> I mean real Big</span>
CSS
.label {
display: inline-block;
vertical-align: middle;
}