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
Related
Hello there ladies and gentlemen.
I've got quite the puzzler going on. I have just installed a fresh instance of Laravel (5.1) on a Vagrant (1.7.4) machine in Windows (10). The weird thing is that I'm linking both the external stylesheet and javascript the same way:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheets" type="text/css">
<script src="{!! URL::asset('js/all.js') !!}" type="text/javascript"></script>
The problem is that the styles are not being applied (cross-browser) to the elements. I'm not getting any errors in the console. When I look at the head of the document I can see that it's the right path:
<link href="http://laravel.dev/css/app.css" rel="stylesheets" type="text/css">
<script src="http://laravel.dev/js/all.js" type="text/javascript"></script>
I have a standard Laravel file structure with the CSS and JS folders inside the public folder. If I look at the sources tab inside Chrome developer tools, I can see that the JavaScript file is being loaded but there is no sign of the CSS file. But if I right-click on the link for the CSS file, and open link in new tab, I can see the CSS. I have tried explicitly changing the character encoding type to UTF-8 both as an attribute in the link tag as well as the first line of the css itself with the #charset 'at rule'. Here are some illustrations:
Thanks for your help.
In your css-link you have rel="stylesheets" (plural). It should be rel="stylesheet" (singular) :)
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>
Font awesome css placed in prototype/css/views/. Font files is in prototype/css/views/fonts folder. Also I have declared <link rel="stylesheet" href="css/views/font-awesome.min.css"/>. I have <i class="fa fa-arrow-right fa-4x"></i>.
I can access them by directly typing their url in Chrome. For some reason it is not loaded and [] is displayed. How to fix it?
UPDATE:
It starts to work when I replace <link rel="stylesheet" href="css/views/font-awesome.min.css"/>
with <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
But I need css and font to be placed on my site...
You probably need the relative path from your CSS file to the font file (not from HTML to font). Also think you need to update the css file to have the correct path to the font file.
Try href="/prototype/css/views/font-awesome.min.css"
And in font-awesome.min.css edit the paths to fonts/FONT.EXT
<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!
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