因为我目前正在使用GatsbyJS进行构建,所以我想给react-fontawesome一个旋转。在旧的React项目中,我当时使用CDN和fontawesome v4并使用堆栈来实现将一个图标放入另一个图标,并在文档中实现,现在v5中使用了图层。

但是,react-fontawesome中似乎没有任何内容可让您使用FontAwesomeIcon组件中的图层。

我真的无法回到CDN,因为GatsbyJS中的static.html(包含头部)每次都会刷新,并且每次重新加载时都会被擦除。同样,将字体真棒文件手动导入到我正在使用的JS文件中也是不希望的。

这是一个片段,显示了我当前拥有的内容(显然,图标并排显示,而不是彼此并排显示)。



import React, { Component } from 'react'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faChevronDown } from '@fortawesome/fontawesome-free-solid'
import { faCircle } from '@fortawesome/fontawesome-free-regular'

const IndexPage = () => (
    <div>
        <FontAwesomeIcon icon={faChevronDown} size='lg' />
        <FontAwesomeIcon icon={faCircle} size='lg' />
    </div>
)

export default IndexPage

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>





这是一个简短的代码片段,显示了定期使用带有CDN的awesome v4字体(非反应版本)所需的结果



<span className="fa-stack fa-lg">
    <i className="fa fa-circle-thin fa-stack-2x icon-background" aria-hidden="true"></i>
    <i className="fa fa-chevron-down fa-stack-1x" aria-hidden="true"></i>
</span>

最佳答案

您可以在包装元素中使用css类来实现它,如下所示:

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon={faChevronDown} size='lg' />
  <FontAwesomeIcon icon={faCircle} size='lg' />
</span>

10-06 04:27
查看更多