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.
Related
I use bootstrap to display a glyphicon icon, the online link works fine, when I copy the bootstrap.min.css locally, the icon is not working properly !!!
<link rel="stylesheet" href="bootstrap.css">
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
gives :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
gives :
I want to keep the css locally to reduce loading time
Are you sure you referenced the right path for your local copy of Bootstrap? Your href is pointing to bootstrap.css.You are talking about bootstrap.min.css.
Check the developer to see if it recognizes bootstrap. That should provide some information.
I think the poroblem was bootstrap.min.css points to fonts/glyphicons-halflings-regular.woff2 , fonts/glyphicons-halflings-regular.woff and fonts/glyphicons-halflings-regular.ttf in the same path. so I have to copy them too :)
Thank you all
You have to download complete package's of bootstrap on this link http://getbootstrap.com/getting-started/#downloadand put into local-host folder
then you can link stylesheet like this
<link rel="stylesheet" href="http://127.0.0.1/xxxxxxx/css/bootstrap.min.css">
i think this may help you
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>
<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