Navigating media queries with Font Awesome props in React.js: A simple guide

I needed to adjust the size of a Font-Awesome component in React.js based on different media queries. How can we change the size of the Font-Awesome component dynamically according to the screen size?

export const Revenue = (props) => (
  <div className={classes.Div}>
    <div>
      <FontAwesomeIcon
        style={{ marginTop: "20px" }}
        size="3x"                      //   @media(max-width: 415px) { size= 2x} and 3x for other
        icon={faDollarSign}
        color="#01CBC6"
      />
    </div>

    <div
      className={classes.SmallDiv}
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <h3>{props.data.totalRevenue}</h3>
      <p>Total Revenue</p>
    </div>
  </div>
);
javascriptcssreactjsfont-awesome

Answer №1

After reviewing the documentation for FontAwesomeIcon, it seems that native support may be lacking in this area.

However, with CSS modules at your disposal, you have the flexibility to apply custom styles to FontAwesomeIcon by utilizing the appropriate classes within the className attribute.

<FontAwesomeIcon
  icon={faDollarSign}
  className={classes.dollarIcon}
/>

To further customize the appearance, you can define corresponding CSS properties within your module file:

.dollarIcon {
  // Your style adjustments here
  @media (max-width: 415px) { 
    height: ....;
    width: ....;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes a function loss when using the spread operator on window.localStorage?

I am attempting to enhance the window.localStorage object by adding custom methods and returning an object in the form of EnhancedStorageType, which includes extra members. Prior to using the spread operator, the storage.clear method is clearly defined... ...

javascripttypescript

What could be causing the content to disappear when switching from flex: column to flex: row?

In the code snippet provided below, you may notice that when the screen size is less than 768px, the video and content underneath it are visible. However, as soon as the screen size exceeds 768px, the video disappears. Have you ever wondered why the video ...

cssflexbox

Sending a cookie token to the server through the header

This is my first attempt at working with a server Utilizing React and express Storing token in browser cookie from the server //Upon login request res.cookie('token', token, {maxAge: 3600000} ).json({ user: userDoc, message: 'message!&apos ...

javascriptreactjsexpressbackend

"Customizing the appearance of Angular Formly forms by adding classes to the surrounding div element

<formly-form model="vm.model" fields="step.inputs" options="vm.options"> <div style="text-align:right"> <button type="submit" wz-next class="btn btn-primary submit-button" ng-disabled="innerForm.$invalid">Next</button> ...

javascriptangularjsangular-formly

The error message "React Native Redux useSelector is returning Undefined after navigation" has

After navigating to a new state, I am facing issues with accessing the updated state. Initially, I initialize my dataState in the reducer and update it using actions. On Screen 1, I successfully use this state after dispatching, but when moving to another ...

javascriptreactjsreact-nativereduxreact-hooks

Upon initial login, React fails to retrieve notes

I developed a note-taking React app using the MERN stack with React Router DOM v6. When I initially visit the website, I am directed to the login page as intended. However, upon logging in, the page refreshes but does not redirect to the home page. This is ...

javascriptnode.jsreactjs

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

cssmarkdownreveal.js

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

I am facing an issue with my object array not successfully implementing the map method within a React function

I am encountering an issue with using the map method on an array inside a state. When attempting to do so, I receive an error stating .map is not a function Here is some context: const [movies, setMovies] = useState ('') useEffect (()=>{ ...

javascriptarraysreactjsfunctionreact-hooks

Reserve a spot for a credit card in 4-digit format with VueJS

When I enter a credit card number, I want to automatically insert a space after every 4 digits. For example: 0000 0000 0000 0000 I am currently using vue js and have come across examples using jquery, but I prefer not to use jquery. Any help would be appr ...

javascriptvue.jsvuejs3

Transmitting PHP arrays to JavaScript through AJAX

I am struggling to retrieve an array from a SQL server using PHP and parse it to JavaScript using AJAX. Despite trying various solutions found through Google, I have been unable to successfully retrieve the array. Below is my PHP code: <?php inclu ...

javascriptphpjqueryajax

I'm in the process of constructing a create-next-app and I need to retrieve data from a web API. However, I'm unsure of the best place to securely store the API key

I am working on building a create-next-app that will retrieve data from the News Catcher API and display it within my application. I have obtained an API key to access the News Catcher API. However, I am unsure of where to securely store the API key and h ...

javascriptreactjsjsonapinext.js

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days ...

javascriptcss

Leveraging Async/Await to track error counts across three distinct loops, each invoking an asynchronous function in every iteration

While I have experience with Callbacks, Async/Await and Promises are new concepts to me. In my node.JS server project, I am faced with the challenge of counting errors generated by thousands of asynchronous calls from three different async functions. My g ...

javascriptnode.jsasync-await

The deletion was not successfully carried out in the ajax request

Can anyone help with an issue I'm having while trying to remove a row from a table using the closest function? The function works fine outside of the $.post request, but it doesn't work properly when used within the post request. Here is my code: ...

javascriptjqueryajax

The issue of misplaced data and nested v-for loops

I received some rather messy data from a backend API in JSON format and I am struggling to display it correctly within an HTML table. The list items are not aligned properly within the table. For instance, as shown in the screenshot, items like 2.1, 2.2, ...

javascriptsortingvue.jsvuejs2

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu

The div element does not have an inline display style

My challenge lies in creating a container with two main elements - a header and body. Within the header div, I aim to have a 50px by 50px image alongside a user name displayed inline, but despite my efforts, I can't seem to achieve the desired layout. ...

htmlcss

ReactJS Error: Rendering objects as a React child is not supported. If you intended to render multiple children, make sure to use an array instead

customMovieService.js: const films = [ { _id: "5b21ca3eeb7f6fbccd471815", title: "Inception", genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Sci-Fi" }, numberInStock: 8, dailyRentalRate: 2.0, publishDate: "2019-07-15T14:36:40.8 ...

javascriptreactjstwitter-bootstrap

Transforming multi-layered form data into a JSON array structure for seamless integration with application/json

I'm currently developing a Laravel application and facing an issue with the $controller->wantsJson() method in the back-end. This method returns TRUE only if the content type of the request is set to application/json. jQuery.ajax({ type: ...

javascriptjqueryjsonajaxlaravel