I tried to use font-awesome with meteor by installing the folowing package :
https://atmospherejs.com/natestrauser/font-awesome
https://atmospherejs.com/fortawesome/fontawesome
But with both packages I get the same result, being a box as if the character did not exist :
HTML :
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
Result :
I tried that HTML snippet in one of my projects using the official (fortawesome-fontawesome) package and had no issues. There are a slew of potential reasons this could be the case, my first recommendation would be to inspect the element using chrome and look at the CSS. Make sure there's no overriding going on from other CSS files/libraries/packages you may have installed.
Additionally, check your browser console to see if any assets are failing to load.
If you can't seem to find anything out of the ordinary, remove the package meteor remove fortawesome:fontawesome, and add it manually by creating an index.html file in your project and adding this to it:
<head>
<link rel="stylesheet" href="<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" type="text/css">
</head>
Related
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
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) :)
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
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>
When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!