由于我目前正在使用 GatsbyJS 进行构建,因此我想尝试一下 react-fontawesome
。在旧的 React 项目中,我当时使用了 CDN 和 fontawesome v4 以及堆栈来实现将一个图标放入另一个图标中,并在文档中实现,现在在 v5 中使用了图层。
但是,react-fontawesome
中似乎没有任何内容允许您在 FontAwesomeIcon 组件中使用图层。
我无法真正返回 CDN,因为 GatsbyJS 中的 static.html(包含头部)每次都会刷新,并且在重新加载时会被删除。同样,手动将 font Awesome 文件导入到我正在使用的 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>
这是一个简短的片段,显示了定期使用 font Awesome v4 和 CDN(非 react 版本)所需的结果
<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>
关于reactjs - 如何通过react-fontawesome使用图层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48127747/