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
Related
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
I have a question. Do any of you know why when a try to add an additional class to a fontawesome icon it doesn't work?? Looks like this,
<i class="fas fa-angle-up"></i>.
What I want to do is to add an additional class to this item just like .hide.
It should work this way
<i class="fas fa-angle-up hide></i>
Of course, if it is possible to put additional classes to a fontawesome icon, it is usually like this:
<i class="fas fa-angle-up"></i>
And you only add the additional classes you need, these must be previously created:
<i class="fas fa-angle-up hide"></i>
My problem is the next:
I have a p:commanButton like this:
<p:commandButton icon="fa fa-reply fa-2x"/>
The problem is that the content (fa-reply) grows but the size of the button doesn't.
Which is the problem?
When I do: <p:commandButton icon="fa fa-reply" styleClass="fa-2x"/> the size of the button grows, but the content doesn't show correctly.
I think, simple work-arround would be to use p:commandLink with manual <i class="fa fa-reply fa-2x"></i> tag instead of p:commandButton, as following:
<p:commandLink>
<i class="fa fa-reply fa-2x"></i>
</p:commandLink>
And if you want to use text as well, then:
<p:commandLink>
<i class="fa fa-reply fa-2x"> Reply</i>
</p:commandLink>
Otherwise, you will require to add compatencies for the different sizes of the icons (fa-xx) on your p:commandButton using custom CSS classes.
You can simply add style="font-size: 2rem" to your button:
<p:commandButton icon="fa fa-reply" style="font-size: 2rem"/>
This will set the font size of both the icon and the button text.
Example from the showcase where I applied this to the button in the middle:
I suggest to create a class though, so you can reuse this style on buttons.
See also:
How do I override default PrimeFaces CSS with custom styles?
I am a beginner in HTML. Till now I have learned about images and how to include them in HTML. I have one sample web project which I am studying. And it has some html code as below
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
And this code creates a "CROSS" (X)image/icon on front end.
Question 1: How the image is actually drawn on front end. Generally to get an image I do something like "<img src = "image.jpg>". So I am confused how that "CROSS" image/icon is getting loaded.
Question 2: Where in the project folder I can find this image/icon. I am not able to find it in the project folder. Is there any special folder where these images/icons are kept.
Question 3: What are the extension of these images. "jpg" "gif" or what?
Question 4: Is there any list of these type of images available online which I can use in the project.
Question 5: If the list is not available online then how can I create images like that and add them using i tag.
Please guide me.
Answer #1
Is a CDN content delivery network is getting the source from the internet I thin what you are using something like a framework like fontawesome here is the link (http://fontawesome.io/icon/times/).
Answer #2
you can't find the image in any folder because you didn't download it. BUT you can download the whole package then you will have to link that package to your HTML with something like <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> In the <head> of your html, reference the location to your font-awesome.min.css. here is the link to instructions (http://fontawesome.io/get-started/)
Answer #3
they are svg files
Answer 4 & 5
yes there a re bunch of them you can find them all in there just type what are you looking for, you can even animate those icons. (http://fontawesome.io/examples/) examples in the link. just a quick explanation
i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
the class is used to describe the name of the icon (which icon)
fa-2x is the size of the icon with fa-5x been the largest
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).