I can't find reason/eplanation on web why I experience this. I use the typical settings:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
I don't know why most of the time the icon appears hollow, but when you hover on it, it automatically appears.
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?
sorry for the strange nature of this question however I was alerted to an issue and I can not find what has happened.
Overnight (04/02/2018) the styling of my react web application seemed to completely break. The nav bar no longer displays and the container alignment is no longer working, nor is the responsive aspect of the application. No code has changed during this time, and I can not see any errors when debugging or checking the console in IE,Chrome and FireFox.
Has this happened to anyone else? I have attempted to update the version of bootstrap the react app is using but this has not changed anything regarding this issue.
This is because now the latest bootstrap refers to v4 in the link https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css
You need to change your link to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css where you have been including stylesheet most probably /public/index.html or just search through files where you are importing bootstrap from cdn and change it to version 3(3.3.7 in my case), because react-bootstrap(Navs, NavItems or any other components ) uses bootstrap v3 css
Change this: ]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
to not lastes version, for ex.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
I have CSS files that are being loaded correctly in FireFox (52.0.1). They are listed in the Style Editor tab, but not in the Network Monitor tab. It doesn't matter if I click All or CSS in the Network Monitor tab, no CSS files show up.
I am including the css files in the <head> like so:
<link rel="stylesheet" type="text/css" href="https://{path}/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="https://{path}/plugins/components/jquery-ui/themes/base/all.css" media="all">
I'm assuming they're supposed to show up in the Network Monitor tab considering there is a CSS option, so what gives?
As your screenshot says that there were only 15 requests but you obviously have 8 files in the Network Monitor and an even larger number of CSS files, this looks like a bug in the Firefox DevTools.
I suggest you first try out a new Firefox profile. If it works there, its obviously a bug in your profile. You may track it further down to a specific preference or add-on causing the CSS files not to be listed within the Network Monitor, but in any case you should file a bug.
I've created the following custom ui: custom jquery ui
im importing every single css file from this folder.
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.structure.css" />
Problem is that my month/year select has no design and text is blank unless I hover it.
Any suggestions would be appreciated, also, if information is missing, ill provide.
EDIT
I dont want to "put a bandage" on it and just fix the design myself, I want the select to use the custom ui, like any other input type..
When I inspect the element I don't see too many conflicts, but what I do see is some color properties such as border,background,color etc that are grayed out (In chrome).
Found half of the answer
bootstrap.min.css is conflicted with the jquery-ui design.. any suggestion to let jquery-ui get priority in this?
Your month/year select text is having white color that is the reason it is not visible so just change select text color it will be visible.
Solved the conflict with the select,
ran a search of 'select' in bootstrap.css and deleted each reference.
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>