Home > Web Front-end > JS Tutorial > body text

How to use icon font in vue

不言
Release: 2018-08-25 10:04:52
Original
1436 people have browsed it

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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!