Bootstrap icon is not displaying - css

<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!

Related

Bootstrap glyphicon changes icon when I copy it on localhost

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

How do I get Font-Awesome to work within the confines of an eBay listing?

So I've been slowly trudging my way through a responsive eBay listing template using Bootstrap, it took some trial and error but I seem to have nailed everything down except the ability to use font-awesome in the listing.
The first attempt at a solution was to point to the font-awesome cdn for the css file which is supposed to include the necessary information to embed the font, but it did not work.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I read somewhere else where the link had http: in front, so I tried that, it also didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then I tried to point it all directly to my own server. So I put a full path to the css file on my server:
<link rel="stylesheet" href="http://www.lqskins.com/ebay/font-awesome/css/font-awesome.min.css">
Then I edited the css file directly in order to put the correct path to the font files themselves in the css file, example:
src:url('http://www.lqskins.com/ebay/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0')
None of these solutions have worked. If I pull up my test template on the server that points to the same css file, they work fine there. Is there a way to load font-awesome for use within an ebay listing, or is crippled beyond workability?
I am having no issues with this. The following code correctly displays a cog in my ebay listing.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-cogs"></i>

icon fa-twitter : What does this mean?

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.

Adding Icon/Icon Links

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>

There is no message icon in bootstrap 3

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

Resources