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
Related
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>
I am trying to show fa icons with name of category in woocommerce wordpress products. I have figured it out to display them on a separate page but while showing them in the mega menu (Tweezers By Category), I am facing the problem that the FA icons are showing in the new line rather than showing before the name. You can check the live link here.
Please check if anyone can help me here.
You should add the icon inside each <li> element, example:
<li style="float:left;">
<a href="http://newsite.cealinetweezers.com/tweezers/tweezers-by-category/aquarium-aquascaping-tweezers/">
<i class="fa fa-dropbox"></i>
Aquarium & Aquascaping Tweezers
</a>
</li>
Wrapping the icon with a span and float left outside the li it's not the way to go.
So the span tag is doing the trick here.
<li style="float:left;">
<i class="fa fa-dropbox"></i> Aquarium & Aquascaping Tweezers</li>
I'm using font-awesome in my Django project, as icons in front of nav-bar list. My problem is, as the title says, some icons show up normally, some icons show square with 4-digit unicode inside, and some icons show up but mismatch the code. What a mess!
I've been stuck here for long, and i tried a lot to solve it. Read the docs through, and googled a lot, but no effective solutions found.
Environment information:
I'm using the latest version of Font-awesome(4.6.3) local copy on linux server(Ubuntu 14.04).
I've tried to load this page on Chrome/Firefox/IE, the results are no different.
I've tried to disabled the AdBlock plugin, resulted in vain.
Specific code:
The 1st icon is normal.
The 2nd icon only show square with unicode (the same with official).
The 3rd one show a mismatch icon.
<li class="openstack-panel">
<a class="openstack-spin" tabindex="6">
<i class="fa fa-home fa-fw"></i>
Security Group
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="7">
<i class="fa fa-key fa-fw"></i>
Key Pairs
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="8">
<i class="fa fa-git fa-fw"></i>
Floating IP
</a>
</li>
Here is how icons are displayed on browser:
Could anyone help me out?
Use the following link for Font Awesome and try,
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
or
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css
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