I'm using FontAwesome inside a React App and TypesScript(created with react-react-app), but the icons aren't showing yet I followed the documentation's guide step-by-step.
Importing icons globally (index.tsx)
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons';
library.add(faCheckSquare, faCoffee);
Using the icons in my component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export const Home = ()=> {
return <FontAwesomeIcon icon='coffee' size='lg'/>
}
What is happening?
The below screenshot shows where the icon is supposed to be next to view price changes but it's not visible. What am I doing wrong? Thanks in advance.
Most probably Css of font-awesome is not added
try adding this in your index.html file.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
Related
I have a multi language web project made by React.js & typescript and want to using bootstrap 5 CSS.
The problem is I want to dynamically change bootstrap CSS link on head section depend on language (ltr or rtl).
This link in public/index.html file:
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
...
</head>
convert to this dynamically:
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
...
</head>
After changing language I want to modify CSS link for rtl or ltr.
I'm using method on rout and successfully changing HTML dir but looking to modify with React.js & TypeScript.
Is there any solution for doing this?
You can do this by using ReactHelmet.You can create a StyleSheetUrlSelector Component. Then based on your criteria, you can render whichever stylesheet you want to render.
import React,{ FC } from "react";
import ReactHelmet from 'react-helmet';
interface ICssSelector {
ltr:boolean;
}
const CssSelector:FC<ICssSelector> =(props)=>{
const {ltr} =props;
return(
ltr === true?
<ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.ltr.css"}]
}/>
: <ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.rtl.css"}]
}/>
);
}
export default CssSelector
Im wondering about the best way to import svg image to be used as favicon in react
i have following code, which works:
import { favicon } from './static/favicon'
<link href="${favicon}" rel="shortcut icon" />
But here, favicon icon is exported const from .ts file:
export const favicon = `
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...0Y/QTN1SKbITsFi0AAAAASUVORK5CYII=
`;
I was wondering if i can somehow just use .svg file and export that to be used?
if i try to do:
import favicon2 from './static/favicon.svg'
<link href="${favicon2}" rel="shortcut icon" />
i will get function%20SvgFavicon(props)%20%7B%20%20return%20/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[ error in the console.
you can have a customizable icon with this library
https://github.com/oblador/react-native-vector-icons
I'm fetching data from api call in _document.js, and based on data putting condition to include css using Link tag.
I was trying to include css file from public/static/ folder in _document.js or layout.js file,
but not working.
layout.js file
import React from 'react';
import Head from 'next/head'
...
<Head>
<link rel="stylesheet" href="public/static/ed_style.css" />
</Head>
...
I think your link is not correct. You can try an absolute one like this
<link rel="stylesheet" href="/static/ed_style.css" />
You should use import NextHead from 'next/head' instead of import Head from 'next/head'
Create your own Head component :
const Head = () => (
<NextHead>
<link rel="stylesheet" href="static/ed_style.css" />
</NextHead>
)
And then in your layout.js
import Head from '../components/head.js'
Thank you guys for you time.
I got solution.
I have put my css file ed_style.css directly to public folder and accessed as below.
<link rel="stylesheet" href="/ed_style.css" />
and Its working
I try to use snipcart in a single product page (like here) with react.
With the code below a click on the button (class="snipcart-add-item") doesn't do anything. How do I have to import?
In my version "data-api-key" is my correct snipcart api key of course.
import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css"
import React from 'react';
function App() {
return (
<div className="App">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="API_KEY"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />
<button
class="snipcart-add-item"
data-item-id="2"
data-item-name="Bacon"
data-item-price="3.00"
data-item-weight="20"
data-item-url="http://myapp.com/products/bacon"
data-item-description="Some fresh bacon">
Buy bacon
</button>
</div>
);
}
export default App;
Go to public/index.html and paste your scripts and link inside the head
I am trying to use react-bootstrap in react and installed it by using command
npm install react-bootstrap --save
but it's not working, also tried to add external react-bootstrap.js but still getting an error
error 'ReactBootstrap' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
what am I doing wrong in this code. This is HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is JSX file.
import React, { Component } from 'react';
import logo from './logo.svg';
class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
return(
<div>
<img src={logo} className="App-logo" alt="react-logo"/>
<h1> Trying react</h1>
<Button>Noob</Button>
</div>
);
}
}
export default Hello;
and here the rendering code in other file.
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
the same code is working fine , If I remove
let { Button} = ReactBootstrap.Button;
and
<Button>Noob</Button>
from JSX file.
You will need to import that component from react-bootstrap like - var Alert = require('react-bootstrap').Alert;
For more information please take a look at this - https://react-bootstrap.github.io/getting-started.html