An empty rectangle is displayed, instead of a Semantic UI icon - semantic-ui

Why is the Id Card icon of Semantic UI displaying an empty vertical rectangle ?
<i class="id card icon" style="font-size: 18px;"></i>
I just installed the standalone package and I can see other icons being correctly displayed, like this one:
<i class="car icon black" style="font-size: 18px;"></i>
This happens on Chrome 60.0 and on Firefox 55.0 on a Linux Lubuntu 16.04 system.
It must be something with my page though, because the Semantic UI project page displays its icons just fine in my browsers.
I then thought about some conflict with some other css, and so under the Chrome debbuger I deleted all elements in my page, to end with a very bare bones page, but still, the icon would not display.

I finally got it to work. I downloaded the latest master from their github project page and added the following
<link href="/css/semantic-ui/semantic.min.css" media="screen" rel="stylesheet" type="text/css">
in my web page.

Related

FontAwesome icons doesnt show up after being downloaded?(works with URL, doesnt with SRC)

I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

material icons not being loaded correctly the first time in Safari (mac)

this is how the font looks when I visit the webiste the first time
Then if I right click and select "reload page", the fonts are displayed correctly
this happens only on macs using safari. works fine in other browsers.
link in index.html header
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
Any help is aprreciated.
Here is how I solved part of the problem: https://stackoverflow.com/a/52763507/783364
And here some details with "preload" fonts and #font-face that saved me a lot:
https://stackoverflow.com/a/42683378

Xenforo 1.4.5 Icon Error

I am trying to assign some of the new 4.3 icons to my forum nodes.
Here is the forum link: enter link description here
The problem I am having is the older icons show up just fine, but the new icons show up as a square white box.
Here is some existing working code followed by the new icon code that is not working.
Working Icon:
/* General Chat */
.node_9 .forumNodeInfo .nodeIcon:before {content: '\f1d7' !important;}
Not Working Icon:
/* Requests */
.node_112 .forumNodeInfo .nodeIcon:before {content: '\f234' !important;}
I have no idea how to fix this. Any help would be appreciated.
I did read this:
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project. In the
of your html, reference the location to your
font-awesome.min.css. Check out the
examples to start using Font Awesome!
I do not understand what it is asking me where to do, as all of my customization are in extra.css . I do not have a RAW html site that uses
Thank You
You are using the old CDN reference URL for FontAwesome.
Replace in header
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
with this
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Adding Icon/Icon Links

I was wondering how to add an Icon link to a webpage. I.e a picture of the twitter logo and once clicked it goes to your twitter page.
I'm specifically wondering how the logo is made like that, is it a custom image or what?
Thanks!
EDIT: Sorry to specify I mean I am wondering if there is a database of icons that you can use for links or if they are created by the person that designed the web, not how to link a picture.
I recommend Font Awesome icons. Yes, it's very simple to use them as a link. Simply embed the external CSS file into your HTML, and add the respective classes to your items. Try something like this for your twitter image:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- This embeds the Font Awesome icons -->
<i class="fa fa-twitter-square fa-3x"></i>

Font-awesome need to be hovered to display

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.

Resources