带有tailwindcss的字体很棒的响应式大小答案

【问题标题】：Font-awesome responsive size with tailwindcss带有tailwindcss的字体很棒的响应式大小
【发布时间】：2021-12-25 05:57:15
【问题描述】：

我想让字体大小响应，但它不适用于 font-awesome。

如何使 xl:fa-3x 在 tailwindcss 上工作？

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

谢谢

【问题讨论】：

如果你想使用预定义的类，我假设你应该使用与字体大小相关的类，比如text-*。
谢谢。我试图在不删除 fa-lg 的情况下应用它，但没有奏效。
见。您可以通过与字体大小相关的类来控制 fa 图标的大小。
这些答案解决了你的问题吗？

标签： font-awesome tailwind-css

【解决方案1】：

这是我的解决方案，您需要使用tailwindcss responsive design 与tailwindcss font size 混合使用：md:text-6xl，记得正确连接到您的项目fontawesome 和tailwindcss 祝你好运;-)

示例代码sn-p：

<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>

【讨论】：