I have tried below code,
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
<i className="fa fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it shows icon fa-edit properly,
but when i try to use,
<i className="far fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it doesnt work,
as per website it is,
Try this:
<i className={`far fa-edit`} style={{fontSize:28,color:"#FC46AA"}}></i>
It is probably due to missing spaces between CSS classes (using string templates)
Related
I am learning react.js and I need to make my app responsive. What should I use? Bootstrap or react-bootstrap? Can I use Bootstrap in react? Or I need to use react-bootstrap? What's the difference
react-bootstrap is a UI library of components similar to material-ui or a lot other UI libraries, while Bootstrap alone is a collection of CSS classes + HTML UI components.
You are free to choose between them, react-bootstrap or Bootstrap by your choice.
You can read more about them here
Bootstrap:
import * as React from 'react';
function Example() {
return (
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Oh snap! You got an error!</strong>
<p>
Change this and that and try again.
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
)
}
React-Bootstrap:
import * as React from 'react';
import Alert from 'react-bootstrap/Alert';
function Example() {
return (
<Alert dismissible variant="danger">
<Alert.Heading>Oh snap! You got an error!</Alert.Heading>
<p>
Change this and that and try again.
</p>
</Alert>
)
}
I have created a react project using following command:
npx create-react-app project
I have installed bootstrap 4.3.1 using npm command and I have also imported bootstrap into the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
But for some reason it is not displaying icons.
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-dark mb-5">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand text-white text-lg brand-text" to="/">
MovieSeriesInfo</a>
</div>
<ul className="navbar-nav ml-auto text-light d-inline-block">
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-imdb fa-5x" id="imdb-logo" />
</li>
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-react fa-5x" id="react-logo" />
</li>
</ul>
</div>
</nav>
</div>
)
}
}
export default Navbar;
First, you should install "bootstrap-icons" npm package:
npm install bootstrap-icons
Then, import "bootstrap-icons.css" in your index.js file:
import "bootstrap-icons/font/bootstrap-icons.css";
You need to install font-awesome and import the same,
npm install font-awesome --save
import in index.js file
import 'font-awesome/css/font-awesome.min.css';
For more on how to use font-awesome icons see this.
As far as I know Bootstrap 4.* doesn't support Glyphicon natively, so you should use an alternative, or downgrade to bootstrap 3.* which is not recommended. Fontawesome.com is an option.
I know this question has an accepted answer, but it's for others who did the same mistake as I did. Add this <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet"> tag in index.html, it has the web fonts cdn link. It's given in bootstrap's usage to add this link for icon fonts. Don' just install and the <i> tag. I found it here
I am having trouble setting up my routing using 'react-router-dom'. The problem is if I use the NavLink class, the a tag is lost and bootstrap wont display the css behavior.
What i'd like to happen is figure out a way to get the classes working like a normal a tag. Even if I have the btn btn-outline-primary, having the NavLink will interfere with the css properties.
***edit: I found the problem. If I set all routes for testing purpose to="/", every link is going to be active. So, afterall, Bootstrap is working perfectly, just have to make sure to test it once all routes are set.
<li className="nav-item">
<NavLink to='/' className="btn btn-light mr-1" href="#">
<i class="fas fa-user"></i> Perfíl
</NavLink>
</li>
try nesting the li in the Navlinks and also pass the bootstrap classes to the li and not the Navlink route. remove the href
I'm using font awesome and have imported it in index.js
import '././styles/fontawesome/css/fontawesome.min.css';
following in filter component
<span onClick={this.togglem.bind(this)}>
{/*<span className="rTitle">Filters</span>*/}
<i className="fa fa-filter" aria-hidden="true"></i>
</span>
Here, the icon fa-filter is not getting displayed can anyone lemme know whats going wrong
Using double dots its throws this exception:
You attempted to import
../../../styles/fontawesome/css/fontawesome.min.css which falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
structure is
src/filter.js
src/styles/fontawesome
version -5.5.0
i've imported in filter pointings are all right it show the css styles
when inspected but does not show the icon
Your import looks wrong import '././styles/fontawesome/css/fontawesome.min.css'; you're probably looking for import '../../styles/fontawesome/css/fontawesome.min.css'; (pay attention to the dots).
If you're using React with JSX (you're most likely doing it) you need to use className to define html class attribute:
<i className="fa fa-filter" aria-hidden="true"></i>
Also, the right way to use FontAwesome in React in documented here: https://fontawesome.com/how-to-use/on-the-web/using-with/react
I am using UIKit 3 Beta in Meteor, ie with React. However my Slidenav icons
<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>
are not showing. Do I need to import the components separately. If so how? Since I am working in Meteor UIkit is a node install. I do not see the components.
Please help.
The docs say:
React will work with data-uk-* prefixes only.
https://getuikit.com/docs/javascript#uikit-and-reactive-javascript-frameworks
Try to change your attributes:
<a href="#" data-uk-slidenav-previous></a>
<a href="#" data-uk-slidenav-next></a>