Elementor icons not showing in WordPress - html

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?

Related

One Font Awesome Icon Specifically has stopped displaying on my wordpress site

I have a site with a number of font awesome icons on a page. They all loaded correctly until recently, I noticed today that the handshake icon has stopped displaying the element is ##.fa-handshake-o.fa.vc_icon_element-icon. I have tried replacing it with other FA icons and they display fine. Only the handshake icon has stopped.
Can anyone help me with a fix to get it to display again?
I can provide any more info if needed. Thank you.

Some FontAwesome icons are not appearing

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

Font awesome icons showing up as blank boxes in live site

Font awesome icons showing up as blank boxes in live site while it is showing up correctly locally. Added "fa" in front of the class but still not working. Any idea why?
to test, try loading the code through their CDN rather than locally. see if that does the trick.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I faced a similar issue. I realized I had not put all the fa webfonts. You can debug your issue by going to Inspect Element -> Network and then see which files are resulting in a 404 error.
Go to their initiators and upload those files. It will start working again.

Font Awesome icons disappear after refresh in Chrome

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.

Dashcode web clip icon, I have tried everything and it won't show up

I can't get my dashcode web clip icon to show up, it just shows the safari generated icon. I have tried using dashcode to design it, then I used the code
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
I also tried adding a file named apple-touch-icon.png to the root folder and that still didn't work. I have run the site on the simulator, my iphone, and my ipad and the custom web clip icon will not show up. Does anyone have a suggestion
Update: I just created a new dashcode project and tried adding a webclip icon and it still won't work. This is really starting to frustrate me.
You need to add the image to the image file that is outside the mobile photo
I will add 1 thing that caused this issue for me. After trying all of the documented fixes, I tried adding a background color to my icon. Originally, I had a transparent background. Once I added a background color to the .png file, it all just worked.
My steps:
Use GIMP to create a 72x72 image with 7 layers and a transparent background layer.
Save a copy as apple-touch-icon.png and add to my web app's root folder.
Launch the website on my iPad 2 running IOS 5.0.1.
"Add to Home Screen"
RESULT: A black icon on the home screen.
Back in GIMP, fill the background with a color.
Overwrite my .png file.
Back to iPad safari to reload the site.
"Add to Home Screen"
The icon shows up now as documented.
My conclusion: sufficient or well placed transparent areas in the icon image will prevent iOS from accepting it as valid and cause it to be rejected.