Menu
I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
Here is the HTML:
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
790
Semantic UI is not dead. There is a community that wants to keep it going. I think it would be helpful to create an RFC repo to discuss future direction of the project and the planning of the implementations of the decisions we make.
Semantic provides several ways to modify UI elements. For big projects that rely on building a personalized brand-aware visual language, site themes allow you to modify the underlying variables powering Semantic UI, as well as specify alternative overriding css.
Who uses Semantic UI? 120 companies reportedly use Semantic UI in their tech stacks, including Snapchat, Accenture, and Kmong.
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
Source: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>you can try taking a look at the above snippet. You may also use the below link for other similar issues:
https://cdnjs.com/libraries/semantic-ui
27
You don't need to use font-awesome of any other library try cdn first Official icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
somethimes this doesn't work so what you can do is go semantic-ui official page download semantic ui zip folder and extract in component folder you can find icon.min.css
include that file in index.html
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
<i class="disabled users icon"></i>
ENJOY
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
