React.js не отображает правильный шрифт - PullRequest
Новая
       12

React.js не отображает правильный шрифт

0 голосов
/ 27 апреля 2018

Я столкнулся с проблемой в activ.js со значком шрифта. Здесь я хотел бы визуализировать различные значки, используя условный оператор. Я могу видеть значение рендеринга тега span правильно, но не значок шрифта.

Я вижу, что значки отображаются здесь как svg. Но я не уверен, что вызывает эту проблему.

Любая помощь приветствуется.

значок ссылки сплошной: https://fontawesome.com/icons/star?style=solid

значок ссылки обычные: https://fontawesome.com/icons/star?style=regular

jsFiddle: https://jsfiddle.net/69z2wepo/182809/

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       toggle: true
    }
  }
  toggle(){
    this.setState({toggle: !this.state.toggle});
  }
  render() {
    return (
    <div>
      Hello {this.props.name}
      {
        this.state.toggle ? (
        <span><i className="fas fa-star"></i>solid</span>
        ) : (
        <span><i className="far fa-star default-preference"></i>regular</span>
        )
      }
      <div>
        <button onClick={this.toggle.bind(this)}> Toggle </button>
      </div>
    </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Отличный шрифт javascript не рендерится при срабатывании рендеринга React. Если у вас все в порядке, если вы не используете новые font-awesome svg / javascript icons, вы можете использовать font-awesome в качестве веб-шрифта с css.

В вашем index.html удалите скрипт fontawesome и добавьте таблицу стилей font-awesome css: 

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

Ваш код должен работать.

Другая возможность - использовать официальный пакет font-awesome реагировать

Добавить необходимые пакеты в проект: 

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

Пример кода: 

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

См. Репозиторий github для получения дополнительной информации: https://github.com/FortAwesome/react-fontawesome

0 голосов
/ 27 апреля 2018

Вы также можете использовать Реагировать иконки https://gorangajic.github.io/react-icons/

Реактивные иконки в настоящее время поддерживаются следующие иконки 

Material Design Icons by Google https://www.google.com/design/icons/ (licence: CC-BY 4.0)
Font Awesome by Dave Gandy - http://fontawesome.io (licence: SIL OFL 1.1)
Typicons by Stephen Hutchings - http://typicons.com (licence: CC BY-SA)
Github Octicons icons by Github https://octicons.github.com/ (licence: SIL OFL 1.1)

и т.д ..

0 голосов
/ 27 апреля 2018

Я добавил это (получите его отсюда https://fontawesome.com/get-started), и все заработало 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

и удалил потрясающий js-файл

...