How to use icon font in vue

This article brings you the content about how to use icon fonts in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Because the project is built with Vue and it is inconvenient to use unicode characters, we can only set the class.
At first I thought it was a version problem, but there was no result. It's no problem to find the font path in the style.
Finally, I tried adding a piece of css and found that there was no problem. This is not included in layui.css. I wonder if the layui experts would consider adding it.

[class^="layui-icon-"], [class*="layui-icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: layui-icon !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
-webkit-text-stroke-width: 0.2px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

The code is posted. Friends who encounter the same problem can try

Related recommendations:

Introduction to the difference between shortcut icon and icon code_HTML/Xhtml_Web page production

About the difference between web favorite icon shortcut icon and icon code (reprinted)_html/css_WEB-ITnose

The above is the detailed content of How to use icon font in vue. For more information, please follow other related articles on the PHP Chinese website!