No Icons in semantic-ui-css

[horodnicdragos]

Greetings! I have noticed that whenever using the Icon component with one of the icon name included by semantic-ui the font doesn't seem to be loaded.

I am using [email protected] with Meteor. When I replace the import from my main component to adding a link in my html file to the cdn css of semantic, the icons load just fine.

Did anyone else notice this behaviour?

[carlosneves0]

Yes I'm having the same problem. I'm also using [email protected].

[will-isles]

Me too, did anyone have any luck fixing this?

[TheEcho]

I'm using [email protected] and having the same issue

[ghost]

Using [email protected] with Meteor 1.6.1 and, also, having this problem.

[arjunnayak]

Using semantic-ui-css v2.2.12 with semantic-ui-react and getting this same issue. Is there additional configuration needed?

[MarcelWouters]

Our web application is hosted in a virtual directory so the url is for example: http://www.somewebsite.com/applicationname/

Now it's trying to load the fonts from http://www.somewebsite.com/dist instead of http://www.somewebsite.com/applicationname/dist

This was working fine in version 2.2.12.

[ghost]

Hey guys. I figured out how to make the icons work on Meteor with React. You need to follow the instructions on Meteor 1.3+ and Usage. After that you can leave the definitions set on true in the custom.semantic.json file, or set them all on false while leaving the "icon": true. Because then you will import Icon from 'semantic-ui-css' and voilà: the items will show. Keep in mind that this package is only for the CSS part of Semantic. It will now replace Semantic-UI-React

[TeganLovesUnicorns]

Having this issue in Next.JS/React.

Getting this error... ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

import React from 'react'
import { Header, Icon } from 'semantic-ui-react'
import 'semantic-ui-css/components/icon.css';
import '../styles/main.scss';


class socialMedia extends React.Component {
  render () {
    return (
        <div>
          <Nav />
          <h1>Find Us on Social Media</h1>
          <h2>
          <Icon.Group size='large'>
            <Icon name='instagram' />
            <Icon corner name='add' />
          </Icon.Group>
          Add on instagram
          </h2>
        </div>
    )
  }
}

export default socialMedia;

I don't believe it is an issue with the loaders because my nav bar has a similar import statement for the CSS for Semantic menu items and it also is using SCSS properly...