Projects generated using vue-cli refer to the iview component library, and font icons are not displayed

use the project generated by vue-cli to reference the iview component library,
and then use reset fonts:

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "", Arial, sans-serif !important;
}

then use iview components such as DatePicker, font icons that are not displayed!
then I tried to remove the font-family above, and the font icon was displayed, and then I saw the code referencing the font icon in iview.css:

@font-face {
    font-family: Ionicons;
    src: url(fonts/ionicons.eot?v=2.0.0);
    src: url(fonts/ionicons.eot?v=2.0.0-sharpiefix) format("embedded-opentype"), url(fonts/ionicons.ttf?v=2.0.0) format("truetype"), url(fonts/ionicons.woff?v=2.0.0) format("woff"), url(fonts/ionicons.svg?v=2.0.0-sharpIonicons) format("svg");
    font-weight: 400;
    font-style: normal
}

I changed it to font-family: Ionicons! important doesn"t work either!
could you tell me how to solve this problem?

Mar.06,2021

the font files used by these components are all implemented through: before,:after, and when you reset the style, you also reset the font of: before,:after and added! important, causes the font not to be displayed, so you need to reset the style to:

.ivu-icon:before,
.ivu-icon:after {
    font-family: Ionicons !important;
}

put it in global < style >. < / style > take a look at

first.
Menu