如何使用 font-family 'Fontawesome' 制作令人敬畏的字体？

如何解决如何使用 font-family 'Fontawesome' 制作令人敬畏的字体？

如果我使用 'fas' 类，我会得到实心的检查圆圈，但带有不想要的字体系列。 但是如果我使用 'Fontawesome,Work Sans' 类，我会得到我想要的字体系列的定期检查圈

import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import ReactTable from 'react-table';
import { STORAGE_KEYS } from '../../constants/localStorageKeys';
import { PAGINATION_PROPS } from '../../constants/paginationProps';
import { APPOINTMENTS_MODAL_CONTENT } from '../../constants/status';
import {
    areDemographicsEnabled,areEmailOrTextRemindersEnabled,areEmailRemindersEnabled,areTextRemindersEnabled,getAppointmentTableData,hasPrecheckForms,isBalanceEnabled,isCopayEnabled,isInsuranceEnabled,isPrecheckEnabled,areBroadcastEnabled
} from './AppointmentsUtils';
import BalanceExpandedCell from './tableCells/BalanceExpandedCell';
import CopayExpandedCell from './tableCells/CopayExpandedCell';
import DemographicsExpandedCell from './tableCells/DemographicsExpandedCell';
import FormsExpandedCell from './tableCells/FormsExpandedCell';
import InsuranceExpandedCell from './tableCells/InsuranceExpandedCell';
import RemindersExpandedCell from './tableCells/RemindersExpandedCell';
import selectTableHOC from 'react-table/lib/hoc/selectTable';

const SelectTable = selectTableHOC(ReactTable);

class AppointmentsTable extends React.PureComponent {
    static propTypes = {
        clickedOnReminderStatusesViewAll: PropTypes.func.isRequired,error: PropTypes.bool,fetchAppointments: PropTypes.func.isRequired,filteredAppointments: PropTypes.array,onRowClick: PropTypes.func.isRequired,pageNumber: PropTypes.number,practiceConfig: PropTypes.object,selectAll: PropTypes.bool,selectedAppointmentIds: PropTypes.array,toggleAll: PropTypes.func.isRequired,toggleSelection: PropTypes.func.isRequired,totalPages: PropTypes.number
    };

    constructor(props) {
        super(props);

        const { practiceConfig } = props;

        this.state = {
            isExpanded: false,expanded: _.fill(Array(PAGINATION_PROPS.PAGE_SIZE_VALUE),false),displayAllColumns:
                isPrecheckEnabled(practiceConfig) || areEmailOrTextRemindersEnabled(practiceConfig)
                    ? this.getColumnsVisibilitySettings()
                    : true
        };

        this.isSelected = this.isSelected.bind(this);
        this.toggleHeaderExpansion = this.toggleHeaderExpansion.bind(this);
        this.toggleColumnsVisibility = this.toggleColumnsVisibility.bind(this);
        this.getExpandedRowSubComponent = this.getExpandedRowSubComponent.bind(this);
        this.fetchData = this.fetchData.bind(this);
        this.setRef = this.setRef.bind(this);
        this.getTdProps = this.getTdProps.bind(this);
        this.onExpandedChange = this.onExpandedChange.bind(this);
        this.onPatientNameClick = this.onPatientNameClick.bind(this);
    }

    componentDidUpdate(prevProps) {
        const { filteredAppointments } = this.props;

        if (filteredAppointments !== prevProps.filteredAppointments) {
            this.setRowsExpansion(this.state.isExpanded);
        }
    }

    getColumnsVisibilitySettings() {
        let displayAllColumns = true;
        const localStorageValue = localStorage.getItem(STORAGE_KEYS.DISPLAY_ALL);

        if (localStorageValue != null) {
            displayAllColumns = JSON.parse(localStorageValue);
        }

        return displayAllColumns;
    }

    isSelected(id) {
        const { selectedAppointmentIds } = this.props;

        return selectedAppointmentIds.includes(id);
    }

    toggleHeaderExpansion() {
        const isExpanded = !this.state.isExpanded;

        this.setRowsExpansion(isExpanded);
        this.setState({ isExpanded });
    }

    setRowsExpansion(isExpanded) {
        const expanded = _.fill(Array(PAGINATION_PROPS.PAGE_SIZE_VALUE),isExpanded);

        if (!_.isEqual(expanded,this.state.expanded)) {
            this.setState({ expanded });
        }
    }

    toggleColumnsVisibility() {
        const displayAllColumns = !this.state.displayAllColumns;

        localStorage.setItem(STORAGE_KEYS.DISPLAY_ALL,displayAllColumns);
        this.setState({ displayAllColumns });
    }

    getExpandedRowPrecheckDiv(row) {
        const { practiceConfig } = this.props;

        return (
            <div className="expanded-row">
                {areDemographicsEnabled(practiceConfig) && (
                    <DemographicsExpandedCell status={row.demographics} />
                )}

                {isInsuranceEnabled(practiceConfig) && (
                    <InsuranceExpandedCell
                        insuranceData={row.insurance}
                        clickedOnInsuranceDetails={() =>
                            this.props.onRowClick(
                                row._original,APPOINTMENTS_MODAL_CONTENT.INSURANCE
                            )
                        }
                    />
                )}

                {isCopayEnabled(practiceConfig) && <CopayExpandedCell paymentData={row.copay} />}

                {isBalanceEnabled(practiceConfig) && (
                    <BalanceExpandedCell paymentData={row.balance} />
                )}

                {hasPrecheckForms(practiceConfig) && (
                    <FormsExpandedCell patientForms={_.get(row,'forms',null)} />
                )}
            </div>
        );
    }

    getExpandedRowSubComponent({ original: appointment,row }) {
        const { clickedOnReminderStatusesViewAll,practiceConfig } = this.props;

        return (
            <div className="rt-tr expanded-row">
                <div className="rt-td precheck-cell expander-cell" />
                {isPrecheckEnabled(practiceConfig) && this.getExpandedRowPrecheckDiv(row)}
                <div className="expanded-row">
                    {areEmailRemindersEnabled(practiceConfig) && (
                        <RemindersExpandedCell
                            appointment={appointment}
                            clickedOnViewAll={clickedOnReminderStatusesViewAll}
                            practiceConfig={practiceConfig}
                            type="email"
                        />
                    )}

                    {areTextRemindersEnabled(practiceConfig) && (
                        <RemindersExpandedCell
                            appointment={appointment}
                            clickedOnViewAll={clickedOnReminderStatusesViewAll}
                            practiceConfig={practiceConfig}
                            type="text"
                        />
                    )}
                    {areBroadcastEnabled(practiceConfig) && (
                        <div className="rt-td precheck-cell expanded-precheck-cell"></div>
                    )}
                    {areBroadcastEnabled(practiceConfig) && (
                        <div className="rt-td precheck-cell expanded-precheck-cell"></div>
                    )}
                </div>
            </div>
        );
    }

    fetchData(reactTableState) {
        const { pageNumber } = this.props;

        // This function gets called twice on table page change. Once for the page change itself,// and once for the data change. Don't re-fetch on data change. By the way,the table's
        // page is 0-based,but the prop's is 1-based.
        //
        // This function also gets called on initial load. In that case,the table's page is 0,// and the pageNumber prop is undefined.
        if (pageNumber !== reactTableState.page + 1) {
            this.props.fetchAppointments(reactTableState.page);
        }
    }

    setRef(r) {
        this.reactTable = r;
    }

    onPatientNameClick(rowInfo) {
        this.props.onRowClick(rowInfo.original,APPOINTMENTS_MODAL_CONTENT.ALL_PATIENT_DATA);
    }
    onTextClicked = rowInfo => {
        this.props.onRowClick(rowInfo.original,APPOINTMENTS_MODAL_CONTENT.BROADCASTTEXT);
    };

    onEmailClicked = rowInfo => {
        this.props.onRowClick(rowInfo.original,APPOINTMENTS_MODAL_CONTENT.BROADCASTMAIL);
    };

    getTdProps(_state,rowInfo,column) {
        const props = {};
        if (column.id === 'patientName') {
            props.onClick = () => this.onPatientNameClick(rowInfo);
        }
        if (column.id === 'textBroadcast') {
            props.onClick = () => this.onTextClicked(rowInfo);
        }
        if (column.id === 'emailBroadcast') {
            props.onClick = () => this.onEmailClicked(rowInfo);
        }
        return props;
    }

    onExpandedChange(_newExpanded,index) {
        const expanded = this.state.expanded.slice();
        expanded[index] = !expanded[index];
        this.setState({ expanded });
    }

    render() {
        const {
            error,filteredAppointments,pageNumber = 1,practiceConfig,selectAll,toggleAll,toggleSelection,totalPages = 1
        } = this.props;

        const data = error ? [] : filteredAppointments || [];
        const pages = error ? 0 : totalPages;
        const tableText = error
            ? 'Appointments are currently unavailable. Please try back later.'
            : 'There are no appointments for selected filters';

        const expandedRowSubComponent =
            isPrecheckEnabled(practiceConfig) || areEmailOrTextRemindersEnabled(practiceConfig)
                ? { SubComponent: this.getExpandedRowSubComponent }
                : {};

        const reactTableProps = {
            className: 'mf-appointments-table',columns: getAppointmentTableData(
                this.toggleHeaderExpansion,this.toggleColumnsVisibility,this.state.isExpanded,this.state.displayAllColumns,practiceConfig
            ),data,defaultPageSize: PAGINATION_PROPS.PAGE_SIZE_VALUE,expanded: this.state.expanded,getTdProps: this.getTdProps,id: 'appointmentsTable',loadingText: 'Loading...',manual: true,// informs React Table that you'll be handling sorting and pagination server-side
            minRows: 0,nextText: '',noDataText: tableText,ofText: 'of',onExpandedChange: this.onExpandedChange,onFetchData: this.fetchData,// Request new data when things change
            page: pageNumber - 1,pages,pageText: '',previousText: '',ref: this.setRef,rowsText: '',showPageSizeOptions: false,showPagination: pages > 1,showPaginationBottom: true,sortable: false,...expandedRowSubComponent
        };

        const selectTableProps = {
            isSelected: this.isSelected,selectType: 'checkbox',toggleSelection
        };
        return (
            <div>
                <SelectTable {...reactTableProps} {...selectTableProps} />
            </div>
        );
    }
}

export default AppointmentsTable;

我想使用“Work Sans”字体系列获得很棒的实心检查圆形字体