Font Awesome Icons в кнопке Material-Ui - PullRequest
Новая
       7

Font Awesome Icons в кнопке Material-Ui

0 голосов
/ 04 июля 2018

Я хочу использовать потрясающие значки в моем компоненте кнопки Material-Ui. Но я не мог этого сделать. Ты знаешь почему? (Я использую фреймворк React и response-admin.) 

import '../../../node_modules/font-awesome/css/font-awesome.min.css';
import Button from '@material-ui/core/Button';

....

<Button style={{
                    backgroundColor: '#5cb85c',
                    color: 'white'
                }}
                onClick={() => this.codeGenerate()}>
                <i className="fa fa-star"></i>
            </Button>

Ответы [ 5 ]

0 голосов
/ 06 августа 2019

для шрифта потрясающие значки бренда ... мне понадобилось время, чтобы выяснить это 

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faGooglePlay } from '@fortawesome/free-brand-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(fab);

class FabTest extends Component{
      render(){
          return(
             <Button variant="contained" color="primary">
                  <FontAwesomeIcon icon={faGooglePlay}/>
                      <div>
                         <span> Get it on </span>
                          <p> PlayStore</p>
                      </div>
             </Button>
          )
      }
}
0 голосов
/ 25 марта 2019

Если вы используете только пару значков SVG из Font Awesome, вам не нужно добавлять всю библиотеку FA в ваш проект.

Просто скачайте значок SVG и откройте его в Google Chrome, верно нажмите на него, чтобы увидеть исходный код. Скопируйте путь SVG этого значка и вставьте его в кнопку SVG Icon следующим образом: 

<Tooltip title="GitHub ">
            <Button
              variant="fab"
              mini
              aria-label="GitHub"
              style={{ backgroundColor: "#4078c0", color: "#FFF" }}
              onClick={() =>
                window.open("https://github.com/hiteshsahu", "_blank")
              }
              className={classes.button}
            >
              <SvgIcon>
                <svg
                  aria-hidden="true"
                  data-prefix="fab"
                  data-icon="github-alt"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 480 512"
                >
                  <path
                    fill="currentColor"
                    d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
                  />
                </svg>{" "}
              </SvgIcon>
            </Button>
          </Tooltip>

Будет отлично работать

0 голосов
/ 22 июля 2018

Ну, я не уверен, что вы прочитали офигенное официальное руководство / документацию, но они рекомендуют использовать «response-fontawesome».

https://github.com/FortAwesome/react-fontawesome

Это просто как: 

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

взято по ссылке, приведенной выше.

Я успешно использовал его в своем проекте Material UI. Дайте мне знать, если у вас есть еще вопросы.

0 голосов
/ 21 февраля 2019

Согласно инструкциям на: https://fontawesome.com/how-to-use/on-the-web/using-with/react.

Согласно Font Awesome, они попросили импортировать font-awesome-svg-core и free-solid-svg-icons в файл App.js.

Но, похоже, это не помогло мне при использовании значка внутри компонентного. Итак, это то, что я использовал. Я импортировал следующие файлы в свой компонент: 

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFileDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(faFileDownload)

после импорта указанных выше файлов и кода вы можете добавить значок к кнопке следующим образом, 

<Button
color='primary'
variant="contained">

<FontAwesomeIcon icon="file-download"/>
button_text

</Button>
0 голосов
/ 04 июля 2018

Вы можете использовать Icon компонент из Material-UI для использования иконок

например: 

<Button
 style={{
 backgroundColor: "#5cb85c",
 color: "white"
 }}
 >
  <Icon className={classNames(classes.icon, "fa fa-plus-circle")} />
</Button>

вот рабочий пример: https://codesandbox.io/s/ly4n0z2oz9

и вы можете использовать font-awesome как 

npm install --save font-awesome

import "font-awesome/css/font-awesome.css";

как описано в этой теме: https://github.com/facebook/create-react-app/issues/2872

...