So, I am using Angular and started using FontAwsome. I want to put the text inline, not in 3 lines like in the image above.
The above text is "4 BANJA LUKA".
The other solution would be to make the margins between the lines smaller, so it can fit the icon without making the icon too large (for example 4x or 5x).
Does anybody know the solution?
<span class="fa-stack"> <i class="fas fa-comment-alt fa-3x" style="color:yellow;"></i> <i class="fa-stack-1x" style="font-size:10px;">4 BANJA LUKA</i> </span>
One Way
you are want below manner to add font awesome.
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
Related
I'm trying to change the number value on font awesome's fa-money icon to 750 (instead of 1). Longer term I'll be setting it dynamically, but I can rely on 3 characters of space being required.
I think the answer might be stacked icons as noted in this font awesome blog post, but I haven't been able to get the formatting right.
The customization from the blog post above looks like this:
<span class="fa-stack fa-3x">
<i class="fa fa-file-o fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text file-text">16</strong>
</span>
But again, when I try my best hack-job on the fa-money, it looks like a jumbled mess.
Well the '1' on the money-icon isn't editable, it's 'hard-designed' so you can't just change the number on that one. The other examples on the blog post you posted don't have any numbers in them so it's easy to add with the trick you posted.
There is an 'hack' tough. You can add your own icons to fontawesome, so make a icon like the money icon but remove the inner number. Then once added to fontawesome you can set the number with the trick you tried yourself.
Take a look at https://icomoon.io to see how to add icons. Best of luck!
I haven't been able to find an answer to this question, but perhaps someone can point me in the right direction.
I'm trying to create a stacked icon with a thin (1px) circular line with a transparent fill around a "fa-users" icon.
my code is:
.HTML
<span class="fa-stack fa-4x">
<i class="fa fa-circle-o fa-stack-2x fa-inverse"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
variables.less
#fa-border-color: #8CC63E;
#fa-inverse: #8CC63E;
#fa-li-width: 1px;
This mostly works, except I can't find where to adjust the line thickness of the outline. ("#fa-li-width:" doesn't appear to have anything to do with outline thickness.) I can't find the adjustment in variables.less, stacked.less, nor did anything look promising in any of the other .less files. Any suggestions?
Granted, the easiest solution would be to just create an .svg from Sketch, but I'd prefer to use code-based design wherever possible.
(I have some lovely screen grabs to illustrate my situation, but not enough reputation. Hopefully I was clear enough in my text).
I've been given an assignment to recreate a form from a given image. I'm using bootstrap 3, but can't recreate the following images. At the moment I'm using a label with a rounded radius but it doesn't look the same. Can someone point out the right component I should be using?
You could use fontawesomes stacked icons concept. But this would make the icon bigger that yours. Otherwise, as you pointed out by your self, you could use a badge or label and restyle it the way you need it, by modifying the border-radius or anything else, which doesn't fit your needs...
<!-- just some example code -->
Deposit
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
Priority Payment? <span class="label label-default" style="border-radius:100%">?</span>
Deporit <span class="badge">+</span>
PS: Note that you would have to override all border-radius-prefixes which is better done in a css class (as always). The inline css here is of course just for the sake of simplicity
I got this tiny code:
<i class="icon-plus-sign">Hello</i>
I can't set the font-awesome icon on the right. I tried to change the float, padding, margin, but all to no avail.
In other words, here's what I have:
Here's what I want:
FIDDLE: http://jsfiddle.net/UF9A3/
Don't wrap your text inside the icon markup. Use:
Hello <i class="icon-plus-sign"></i>
or
<i class="icon-plus-sign"></i> Hello
You can also change the position of the icon:
background:(url(../img/dash.png) 0 right no-repeat);
use this
<i class="icon-plus-sign"></i> hello
another u can use this
<i class="icon-plus-sign">Hello</i>
change the position in css
I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts.
I'm looking at 2 different icon situations:
1) The icon has helper text that a screen reader will pick up:
<span class="fa fa-pencil"></span> Edit
2) And a standalone icon without any helper text:
<span class="fa fa-pencil"></span>
Ideally, in both situations, a screen reader will announce that the element is an "Edit" button.
Per FontAwesome's site:
Font Awesome won't trip up screen readers, unlike other icon fonts.
I don't see any speech css tags related to FontAwesome or Bootstrap and not really clear to me how a screen reader will react to each of these situations.
I'm also aware of aria-hidden and Bootstrap's .sr-only and there has to be an ideal way to handle both situations.
Edit: added title="Edit to example 2.
What advantage does using aria-label="Edit" have over the standard title="Edit"?
Edit 2: I came across this article that explains pros and cons of different use implementations.
First of all, you should probably use <button> instead of <a href="#">. Empty links can be confusing for screen readers, but a button is a button. In short, links take you places, buttons perform actions. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).
I would go with a variation of your first code sample, and utilize Bootstraps .sr-only class. If we update your code with button and add in the class, we have:
<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>
We now have a more semantically correct button element; sighted users see the edit pencil icon; and screen reader users will hear "Edit". Everyone wins.
(Note, the button code is straight from Bootstraps CSS Buttons section.)
From my understanding I think it may be useful to also add in:
aria-hidden="true"
to the span class that holds the pencil icon. This will prevent the screen reader from trying to read this element.
<span class="fa fa-pencil" aria-hidden="true"></span>