Some of the FontAwesome icons are not appearing for some reason when I host them on a server, but appear when I view them on my localhost. I've been looking at HTML on the host address using Google Chrome's inspect element feature - there appears to be an empty style tag in the header section that does not exist on the actual index.html:
If I do delete that code in the Inspect Element feature, the FontAwesome icons appear!
http://lanceperalta.x10host.com/ - Here is the website. (Please excuse the content!)
Related
The Problem
I have a webpage with multiple files, local images, and external style sheets. Today I started my Local Host like normal with Live Server and run the page on Google Chrome 108.0.5359.99 (Official Build) (64-bit) (cohort: Stable). And the website layout was broken. Most notable is position, margin, and padding.
Specific problems with the website:
Position: sticky is working on all of the pages expect index.html file
Changing the margin, padding, and position values in the styles.css file does nothing but changing values like color does work
The network tab says 200, ok for styles.css
Intended Results
This image shows a block of content that is working as intended:
This image shows a block of content that is working as intended
And this image shows the content not loading properly:
And this image shows the content not loading properly
Here's the website URL https://creative-daffodil-2c8447.netlify.app/ As well as a Github repository: https://github.com/tech-world-code/website-test
I used elementor icons (cart icons) for my WordPress website. it works earlier fine but right now once I logged in as admin then only the icon got displayed as soon as I logged out and view the website as a normal user, then the icon got disappeared and instead of it, some cross icon got displayed.
I tried to figure out the error and found the following things
<link rel='stylesheet' id='elementor-icons-css' href='https://lotusproshop.se/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css' media='all' />
This stylesheet load only when I logged in. One more thing: I observed that the cart icon does appear for some time and then changed into cross icon
I tried to paste all CSS of this stylesheet manually but it didn't work. Why does this error occur, and how can I fix this?
Bootstrap version 3
Font Awesome version 3.2.1
I am having issues with bootstrap and font awesome on Chrome. When I originally load a page, the font awesome icons are displayed correctly. When I refresh the page, the icons disappear. **To clarify, the entire icon is missing, this is not the empty box issue that some others encounter.
I'm grasping at straws here, but I noticed there were differences in the order in which the files were retrieved between the original page load and the refresh.
When the page is refreshed, the font file is the last item to be retrieved, and it appears to be a cached version as well.
Finally, any icons that are located inside of a <div class="btn"> will be loaded when the mouse hovers over the div.
Any help would be much appreciated!
Initial page load
Page refresh
I guess you are on a Windows machine, right?
This is an old problem with Chrome. See this posting on CSS Tricks. The next to last post should be the answer to your question. Or in short: Use the PUA (Private Use Area) for encoding.
The Unicodes (PUA codes) for each icon are listed in the Font Awesome CSS file - see: Font Awesome uses the Unicode Private Use Area (PUA)... (around line 190).
I got the same problem in latest verion of chrome (33.0.1750.152)
Working solution for me: move styles from body to head section.
I am designing a bigcartel website and am receiving a weird browser-specific problem, on chrome, mozilla and some other browsers when on the website images on the products and the home page do not load correctly and are either slightly above or below where they should be. It is resolved by reloading a couple of times but obviously that isn't good. Here is the link to the website, and the source html replaces bigcartel variables so here is a whole .zip containing all page html and theme css.
https://mega.co.nz/#!aMoTEAwJ!CM6ZLyTMiY8YGWg3StH0xFNVNb89M2WTLkJ0khR-np8
I use chrome all the time when developing my sites, although recently when inspecting elements randomly the style section of the editor will disappear and just show me the padding border and margin section and not the actual style of elements anymore. I've attached a picture of what happens. Does anyone know how to fix this?