I am working on react app. I have include free 'react-fontawesome' in ny application. The issue is that a Regular and Brand fonts HTML is not rending in output HTML but solid fonts are working properly. How can i fix this issue?
App.js
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/free-solid-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
header.js
import React, { Component } from "react";
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon={["fab", 'facebook']}/></li>
<li><FontAwesomeIcon icon={["fab", 'twitter']}/></li>
</ul>
</div>
import React from "react";
import ReactDOM from "react-dom";
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebook, faTwitter } from '#fortawesome/free-brands-svg-icons'
import "./styles.css";
function App() {
return (
<div className="App">
<ul>
<li>
<FontAwesomeIcon icon={faFacebook}/>
</li>
<li>
<FontAwesomeIcon icon={faTwitter}/>
</li>
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Look for icons here in github repo for fontAwesome
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
I have a Next.js project where I am using fontawesome icons.
However, the icon does not show up on the web page. I even checked under inspect element and in the parent div and the icon element is not there.
Below is my _app.js file:
import '../styles/globals.css'
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
And below is my index.js file in the pages directory:
import React, { Fragment } from "react"
import Head from 'next/head'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import '../node_modules/#fortawesome/fontawesome-svg-core/styles.css'
export default function Home() {
return (
<Fragment>
<FontAwesomeIcon icon="fa-brands fa-facebook-f" />
</Fragment>
)
}
Why isn't my icon rendering and how do I fix it?
Thanks in advance.
You still need to import icons into your project. That's why there is nothing showing. This is what your index.js should look like if using the free brands svg icons:
import React, { Fragment } from 'react'
import Head from 'next/head'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons'
export default function Home() {
return (
<Fragment>
<FontAwesomeIcon icon={faFacebookF} />
</Fragment>
)
}
In my react app I am getting 'library' is not defined no-undef' error. I am trying to add font awesome in my app. I have write some code for this:
Error:
Failed to compile
./src/sections/header/header.js
Line 11: 'library' is not defined no-undef
Search for the keywords to learn more about each error.
header.js code
import React, { Component } from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faGoogle,
faFacebook,
faTwitter,
fainstagram
} from '#fortawesome/free-brands-svg-icons';
library.add(
faGoogle,
faFacebook,
faTwitter,
fainstagram
);
class Header extends Component {
render() {
return (
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon="fafacebook" /></li>
<li><FontAwesomeIcon icon="fatwitter" /></li>
<li><FontAwesomeIcon icon="fainstagram" /></li>
</ul>
</div>
)
}
}
App.js Code
import React from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'reactstrap';
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
library.add(fab);
You could add library import since import is not globally accessible to other component
import React, { Component } from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { library } from '#fortawesome/fontawesome-svg-core'
import {
faGoogle,
faFacebook,
faTwitter,
fainstagram
} from '#fortawesome/free-brands-svg-icons';
library.add(
faGoogle,
faFacebook,
faTwitter,
fainstagram
);
class Header extends Component {
render() {
return (
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon="fafacebook" /></li>
<li><FontAwesomeIcon icon="fatwitter" /></li>
<li><FontAwesomeIcon icon="fainstagram" /></li>
</ul>
</div>
)
}
}
Trying to use an outlined button from material UI : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js
But get the error - "Unexpected use of 'self' no-restricted-globals"
And I don't have permissions to change it in the lodash.throttle/index.js file.
Is there any workaround for this that anyone knows of?? (It's literally just the sample code btw)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/#material-ui/core/styles';
import Button from '../node_modules/#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function OutlinedButtons(props) {
const {classes} = props;
return (
<div>
<Button variant="outlined" className={classes.button}>
Default
</Button>
</div>
);
}
OutlinedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedButtons);
After a request. App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
{ OutlinedButtons }
</header>
</div>
</MuiThemeProvider>
);
}
}
export default App;
And index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Since UIKit 3.0 is in beta I would like to use the stable version UIKIT2.27.4 with React and Meteor, however it is not detecting it. I have imported it as follows:
In meteor client/main.js is as follows
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '../imports/jquery-3.2.1.min.js';
import '../imports/uikit/css/uikit.min.css';
import '../imports/uikit/js/uikit.min.js';
class App extends Component {
render() {
return (
<div>
<nav className="uk-navbar">
Kareri
<ul className="uk-navbar-nav">
<li>Home </li>
<li>Trekking</li>
<li>Hotels</li>
<li>Contact</li>
</ul>
</nav>
</div>
);
}
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.container'));
});
How can i get uikit to work with REACT and METEOR?