I'm using it as inside a button but I don't know how to change its size, to make it smaller more exactly.
import { faSort } from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
...
<button
className="my-button"
onClick={() => this.doSomething()}
type="button">
<FontAwesomeIcon icon={faSort} />
</button>
I've tried in Developer tools to add width, height, size with different values but the icon doesn't change its size. Is it because it's SVG?
Is there a way to make it smaller?
FontAwesome comes with predefined sizes which you can control trough attribute size like this:
<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />
But to gain full control I'd recommend adding a classname:
<FontAwesomeIcon icon="spinner" className="inside-button" />
Which can be controlled with CSS like this:
.inside-button {
font-size: 16px;
color: white;
}
Related
Hi guys so I'm trying to use react-bootstrap to create my app and I want my button to change style when hovered on. I already make the css but it won't work, it didn't change when I hover the button. I tried to inspect the element but there's nothing wrong with it. anyone know why it happens ?
Here's my code:
.facsButton:hover{
font-size: 40px;
font-weight: 600;
color: #10255A;
}
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<Button
value="1"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
De'Spa
</Button>
</Col>
<Col sm={4} lg={4} className="RestoButton">
<Button
value="2"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
De'Resto
</Button>
</Col>
<Col sm={4} lg={4}>
<Button
value="3"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
Meeting Room
</Button>
</Col>
</Row>
</Container>
Rules from stylesheets have a lower priority than rules in an inline style declaration from a style attribute:
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
You should use a stylesheet for both (and remove the inline style declaration):
.facsButton{
font-size: 32px;
font-weight: 500;
color: #10255A;
}
.facsButton:hover{
font-size: 40px;
font-weight: 600;
color: #10255A;
}
Alternatively you can use !important but that's an anti-pattern:
When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
[...]
How !important can be used:
A) Overriding inline styles
Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.
In this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.
.facsButton:hover{
font-size: 40px !important;
font-weight: 600 !important;
color: #10255A !important;
}
(Side note: color: #10255A; seems to be the same for both states, so it wouldn't have to be specified in the hover state at all.)
I'm using Semantic UI React.
The code below makes the Popup element with the circular "i" trigger button appear inside the bounds of the button that precedes it, and looks like so:
CSS file:
.pennai .builder-scene .algorithm-btn + i.icon {
position: absolute;
top: 1.1em;
right: .1em;
cursor: pointer;
}
JS snippet:
<Grid.Column key={algorithm._id}>
<Button
fluid
inverted
color="orange"
size="large"
active={getIsActive(algorithm)}
onClick={() => setCurrentAlgorithm(algorithm)}
className="algorithm-btn"
>
{formatAlgorithm(algorithm.name)}
<div className="param-count">
{`${Object.keys(algorithm.schema).length} parameters`}
</div>
</Button>
<Popup
on="click"
position="right center"
header={formatAlgorithm(algorithm.name)}
content={
<div className="content">
<p>{algorithm.description}</p>
{algorithm.url &&
<strong>Read more here <Icon name="angle double right" /></strong>
}
</div>
}
trigger={
<Icon
inverted
size="large"
color="orange"
name="info circle"
/>
}
/>
</Grid.Column>
My question is how does the CSS selector work for this? The Button includes className="algorithm-btn", but my naive take on the CSS selector seems like it should be the Popup element that needs to be told to place itself relative to its ancestor, and thus it should receive the .algorithm-btn class?
I have several Fontawesome tags spread across several components. Their color attribute is currently being hard-coded to a custom color HEX code. I want to centralize this color code in css, so that if needed I would just change it one place. Is this possible?
<FontAwesomeIcon icon={faThumbsUp}
size="sm" color="#7ACC35"/>
Yes you could do that, just use className and define your in css file
.CustomColor {
color: red;
}
.CustomColor2 {
color: green;
}
.CustomColor3 {
color: blue;
}
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />
Codesandbox demo
Anyone, please help, I am trying to display the full image of a small image which are in the gallery.
When I scale the display Modal is auto-resize and the image is not able to resize according to Modal even I use the image inside the Modal. Image overlapping while scaling.
Even I remove width also not workin
function Modalcenter(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Decoration
</Modal.Title>
</Modal.Header>
<Modal.Body>
<img src={G1s} alt="G1s" width="1080" />
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
function Example() {
const [modalShow, setModalShow] = React.useState(false);
return (
<>
<img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />
<Modalcenter
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}
Apply this class to the image
<img src="..." className="img-fluid" >
which is the default class, provided by Bootstrap for making it responsive.
I have a react-bootstrap component and the loading animation will not play.
Also, the button wont center. I can use margin-left: 30px; to move it closer to the center but I dont want that as a solution because on bigger screens it goes off center. For the positioning, I am using an imported CSS file.
import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import Button from 'react-bootstrap/Button'
class Button extends React.Component{
......rest of react component........
return(
<div>
<ButtonToolbar >
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
</div>
Does anyone know what I am doing wrong or what I am not doing at all? Thank you for your time.
You can center align your bootstrap button by modifying its container, here the <ButtonToolbar>
Like so:
<ButtonToolbar className="text-center d-block">
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
For the spinner, do you have any React Error?