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>
Related
Fontawesome-angular can be used via the following tag:
<fa-icon [icon]="['fal', 'info-circle']"></fa-icon>
In some cases - like the primeng accordion - the default icon can be replaced by setting css classes.
Is there a way to access the fontaweome svg images by providing the names as classes without the fa-icon tag?
Something like this:
<i class="fal fa-info-circle"></i>
Demo add this to index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I think there is a typo in the class name.. Try this..
<i class="fas fa-info-circle"></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'm trying to implemented a button just like the one demontrated in the example page of fontawesome, whose code is:
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>
Version 4.3.0
</a>
It works but only when the second line is no more longer than the first one.
So what causes the weird phenomenon and how to fix it?
Thanks.
Edit:
There is a running demo over here.
This is a single page app and the broken btns is over the second scene.
The problem comes with white-space: nowrap;. Bootstrap sets it on .btn. In most cases the text in buttons is on one line. In your case it must be on two. So, add a custom class to the button and overwrite it, like this:
.btn-custom {
white-space: normal;
}
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