Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Problems with Fontawesome

Satanko pro asked 6 years ago


Hi, I am facing a problem in mdb react pro and FontAwesome. I did all the steps from the getting started. (https://mdbootstrap.com/react/5-min-quick-start/)

import ‘font-awesome/css/font-awesome.min.css’;
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘mdbreact/dist/css/mdb.css’;

There are no icons displayed. E.g. when I try this: as shown in example:https://mdbootstrap.com/react/content/table-styles/#table-with-icons
Instead there's only a square

Any help is welcome! 🙂

kind regards,Josef


Jakub Chmura staff answered 4 years ago


Hi @kanwar,

It is very important to import the required file before 'app.js' in your CRA project.

This is an example of default index.js in the CRA project. Please paste these imports to your project.

import React from 'react';
import ReactDOM from 'react-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import './dist/css/mdb.css';
import './index.css';
import App from './App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

registerServiceWorker();

Let me know if my solution works in your case.

Best, Kuba.


kanwar free answered 4 years ago


Hi, I am facing a problem in mdb react pro and FontAwesome. I did all the steps from the getting started. (https://mdbootstrap.com/react/5-min-quick-start/)

import ‘font-awesome/css/font-awesome.min.css’; import ‘bootstrap/dist/css/bootstrap.min.css’; import ‘mdbreact/dist/css/mdb.css’;

There are no icons displayed. The same problem arises

Can you please help me 🙂

kind regards, Priyanka


Jakub Mandra staff answered 6 years ago


Hello, It looks like something's wrong with encoding. We need more information to help you with debugging. Which browser do you use, and which installation option did you choose? Also, please check your console for any warnings or errors. Best regards, Jakub from MDB

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags