引导程序样式使图标渲染过大

我开始玩电子和反应。我试图在我的项目中使用字体真棒图标，但遇到了麻烦。我试图渲染一个图标，但当我将其与引导程序"行"类结合时，它最终会变得太大(看起来它试图获得尽可能多的空间，但我不确定tbh(。如果我从父div中删除"row"类，它将呈现为一个小图标(我希望在现阶段呈现的方式(

理想情况下，我希望能够使用引导程序网格相关的类，如row和col来管理组件的布局，但我不知道如何解决这个问题。

return (
    <div className="container mt-2">
      <h4>{path}</h4>
      <div className="form-group mt-4 mb-2">
        <input
          value={searchString}
          onChange={event => setSearchString(event.target.value)}
          className="form-control form-control-sm"
          placeholder="File search"
        />
      </div>
      <FilesViewer files={filteredFiles} onBack={onBack} onOpen={onOpen} />
      <hr/>
      In div 
      <div className=''>
        <div className='row'>
        <p>
          Your
          <i class="fa fa-coffee"></i>
          is ready
        </p>
        </div>
      </div>
      <hr/>
      In 'p' element
      <p>
        Your
        <i class="fa fa-coffee"></i>
        is ready
      </p>
    </div>
  )

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="../node_modules/@fortawesome/fontawesome-free/css/fontawesome.css" rel="stylesheet">
    <title>React App</title>
  </head>

"row"类的效果没有"行"级的效果

建议变化后的影响

我的建议是导入FontAwesome CSS，这样你就可以使用与文本内联的图标，它将继承父级的样式属性：

<!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
...
<p>
   Your
   <i class="fa fa-coffee"></i>
   is ready
</p>

更多信息可以在这里找到：Docs

相关内容

最新更新

热门标签：