Font-awesome responsive size with tailwindcss

user_1640213 0
Viewed 1703

I would like to make the font size responsive, but It doesn't work with font-awesome.

How can I make the xl:fa-3x work on tailwindcss?

<i class="fas fa-pencil-alt fa-lg xl:fa-3x"></i>

Thank you

font-awesome tailwind-css
1 Answers

This is my solution, You need to use tailwindcss responsive design mix with tailwindcss font size like this: md:text-6xl, remember to hook up correctly to Your project fontawesome and tailwindcss good luck ;-)

Example code snippet:

<i class="fas fa-pencil-alt text-xs text-black sm:text-3xl md:text-6xl"></i>


<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="h-full">
  <div class="flex items-center justify-center h-screen">
    <i class="fas fa-pencil-alt text-xs text-black sm:text-3xl md:text-6xl mr-5"></i>
    <i class="fab fa-font-awesome-flag text-xs text-black sm:text-3xl md:text-6xl"></i>
  </div>
</body>

user_137059790
Related