web-dev-qa-db-ja.com

react-iconsパッケージのfont-awesomeアイコンを拡大する方法

私はmarvelouse react-iconsパッケージ（ http://gorangajic.github.io/react-icons/fa.html ）、特にfont awesomeパッケージを使用しています。

これが反応しなかった場合、 タグに属性を追加するだけです のようになります。

<i class="fa fa-camera-retro fa-5x"></i>

ただし、faFolderOpenタグにfa-5xを追加しても何も起こりません。ご覧のとおり、react-bootstrapを使用しており、アイコンをボタン（ブロックにする必要があります）に配置していますか？

これは以前に尋ねられたと信じる必要がありますが、検索では見つかりませんでした。

ここにそれがどのように見えるか、そして私はそれをもっと大きくしたいです：

enter image description here

const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

<Button type="button" bsStyle="success" block onClick={(e) => folderChooser(e)}>
     <FaFolderOpen />
</Button>
reactjsfont-awesomereact-bootstrap
6
Dr.YSG

5xのアイコンサイズが必要な場合は、sizeとして反応クラスに渡す必要があります。

// Font awesome pixel sizes relative to the multiplier. 
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px

<FaFolderOpen size={70} />

気づいたら毎回14ジャンプします

github readmeから インラインですべてが上書きされていることを示しています。 svgをレンダリングするため、5xを使用できません。ピクセルサイズを使用する必要があります

12
John Ruddell

Reactjsではsize = 'with your preferred size which be from sm to lg or 1x to 10x'を使用できます

これはフォントawesome 5の例です

<FontAwesomeIcon icon={faBars} size = '10x'/>
1
solomon njobvu