I was wondering how to add an Icon link to a webpage. I.e a picture of the twitter logo and once clicked it goes to your twitter page.
I'm specifically wondering how the logo is made like that, is it a custom image or what?
Thanks!
EDIT: Sorry to specify I mean I am wondering if there is a database of icons that you can use for links or if they are created by the person that designed the web, not how to link a picture.
I recommend Font Awesome icons. Yes, it's very simple to use them as a link. Simply embed the external CSS file into your HTML, and add the respective classes to your items. Try something like this for your twitter image:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- This embeds the Font Awesome icons -->
<i class="fa fa-twitter-square fa-3x"></i>
Related
I have a blog. Now I want to use a font icon for Menu bar for good quality.
But I can't upload it to blogger as there's no option. So is there any way to use it without uploading it to blogger?
you can use a CDN and link it in your project like this
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
As answered you can use fontawesome cdn or if you want to further optimize, you can choose specific icons and load a css file.
you can use http://fontello.com/ or https://icomoon.io which are awesome tools for this.
hope this helps :)
While looking into a HTML 5 index page source, I got "icon fa-twitter".
On the front end of the Index page, there is the icon of twitter. I tried to search the icon in the files but it is not there.
Could anyone please explain what exactly this means?
This is likely to be using Font Awesome. Basically an icon font. Please see here
This is about font awsome :see doc
Example:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-twitter">Text</i>
It's Font Awesome icons. If you need to use Font Awesome icons please check this link
http://fortawesome.github.io/Font-Awesome/icons/
...and take a look at the twitter icon for an example.
<span class="glyphicon glyphicon-calendar"></span>
This is my code. I wanted to add Date Icon but its not displaying . Its displaying some kind of default icon , something like rectangle with text EIo9 .I'm using latest bootstrap link
If you are adding this link to your page then, it should work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Make sure your assets directory location are correct? like css,images and fonts i.e.
All you need is bootstrap css file getting included in a right way.
You can take it from localhost or CDN so the code will be:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<span class="glyphicon glyphicon-calendar"></span>
Here's the working example. Good luck!
How can I use font-awesome in css? I searched and see that I just need to download and copy font-awesome directory into my porject then display the icon by using content in css. But instead of displaying awesome icons, it displayed weird and undefinable characters. Does anyone know how to use/fix it properly?
add this in the head of your html page: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I use Bootstrap v3.1.1 (http://getbootstrap.com) and I want to use icon-message-* from the icons that is listed here , but there is no such classes in bootstrap. how should I use them?
I addedd this lines to head part:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
and this is the code that I want to use... but there is no css class for "icon-message-new"
<span class="glyphicon icon-message-new"></span>
Hers is the message icon in Bootstrap:
<i class="glyphicon glyphicon-envelope"></i>
I will recommend to use Fontawesome
http://fontawesome.io/icons/
rather than Bootstraps's Glyph-icon . Font awesome has 479 icons free to use.
Bootstrap doesn't provide the full glyphicons. It has included just 200, and the one you refer to is not listed at the ones bootstrap supports (see the http://getbootstrap.com/components/#glyphicons link fo those details)
To get the complete glyphicons you want, grab them from Github. It's even listen on the page you linked us too.
https://github.com/marcoceppi/bootstrap-glyphicons