html - 将单选按钮转换为星星

Question

我有一些单选按钮，我正在尝试将其转换为星星，我正在按照这些示例创建一个星级评分组件:https://codepen.io/muhammad_mabrouk/pen/bWybwX

我还在学习react，所以我不知道如何在这个组件中导入bootstrap。我需要导入的是:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

代码如下:

import { Component } from 'react'
import React from 'react';
import PageTemplate from './PageTemplate'
import '../css/starRating.css';

class Rating extends Component {

    render(){
        return (
          <div>
            <input id="star-5" type="radio" name="rating" value="star-5"></input>
            <label for="star-5" title="5 stars">
                <i class="active fa fa-star" aria-hidden="true"></i>
            </label>
            <input id="star-4" type="radio" name="rating" value="star-4"></input>
            <label for="star-4" title="4 stars">
                <i class="active fa fa-star" aria-hidden="true"></i>
            </label>
            <input id="star-3" type="radio" name="rating" value="star-3"></input>
            <label for="star-3" title="3 stars">
                <i class="active fa fa-star" aria-hidden="true"></i>
            </label>
            <input id="star-2" type="radio" name="rating" value="star-2"></input>
            <label for="star-2" title="2 stars">
                <i class="active fa fa-star" aria-hidden="true"></i>
            </label>
            <input id="star-1" type="radio" name="rating" value="star-1"></input>
            <label for="star-1" title="1 star">
                <i class="active fa fa-star" aria-hidden="true"></i>
            </label>
          </div>
        );
    }
}

export default Rating;

我将感谢您的所有帮助。

Answer 1

你需要放置这个:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

在 public 文件夹中，index.html 文件。

---

或

下载该文件并将其存储在本地，然后将其与您的 starRating.css

放在一起

然后导入与starRating.css相同的内容

import '../css/starRating.css';
import '../css/font-awesome.min.css';