2017-05-03 9 views
2

나는 경이로운 반응 아이콘 패키지 (http://gorangajic.github.io/react-icons/fa.html), 특히 멋진 글꼴 패키지를 사용하고 있습니다. 나는 FaFolderOpen 태그에 FA-5 배를 추가하면반응 아이콘 패키지에서 멋진 (큰) 글꼴 멋진 아이콘을 만드는 방법

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

그러나, 그것은 아무것도하지 않습니다 같은

이 반응하지 않은 경우

다음 I would just add an attribute to the tag. 당신이 볼 수 있듯이, 나는 반응 부트 스트랩을 사용하고 아이콘을 버튼에 놓아야한다.

나는 이것이 전에 물어 보았다고 생각하지만 나는 검색을 통해 그것을 찾지 못했다. 여기

는 어떻게 생겼는지, 그리고 나는 그것이 더 큰 원하는 : 당신이 5 배 아이콘 크기를 원하는 경우

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

을 사용해야합니다 :'class'는 다음과 같이 작동해야합니다 :' 예약 된 키워드'css class'를 적용하려면'className'을 사용해야합니다. –

+0

JSX 개체가 에 포함되어 있습니다. 반응하지 않는 응용 프로그램에 좋은 내용을 제안 하시겠습니까? –

+0

크기를 늘리거나 줄이려고하십니까? –

답변

4

당신이 size

으로 반응 클래스에 전달해야
// Font awesome pixel sizes relative to the multiplier. 
// 1x - 14px 
// 2x - 28px 
// 3x - 42px 
// 4x - 56px 
// 5x - 70px 

<FaFolderOpen size={70} /> 

각 점프가 14 회 발생할 경우

from the github readme 그것은 모든 것이 인라인 오버라이드됨을 보여줍니다. 그것의 렌더링을 사용하면 5x을 사용하면 픽셀 크기

+0

환상, 감사합니다 –