iconfont字体图标在vue脚手架的使用

在vue项目中引入iconfont字体图标
https://hehuiyun.github.io/2018/01/22/在vue项目中引入iconfont字体图标/

下载到本地,引入文件
推荐这种方法,第一种方法没有网络的话,图标就显示不了。

在iconfont官网中下载文件
https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1076494

如图所示:
iconfont字体图标在vue脚手架的使用_第1张图片

下载的文件目录如图所示:

iconfont字体图标在vue脚手架的使用_第2张图片

步骤:

(1)将这四个文件放到项目新建的fonts文件中,如图:

iconfont字体图标在vue脚手架的使用_第3张图片

(2)将iconfont.css 文件引入到main.js文件中

​ import './common/css/iconfont.css'

注意:要将iconfont.css 文件中src引入的字体路径改成正确的相对路径,如图所示:
iconfont字体图标在vue脚手架的使用_第4张图片

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1552732675778'); /* IE9 */
  src: url('../fonts/iconfont.eot?t=1552732675778#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVYAAsAAAAACugAAAUIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEPAqGbIU1ATYCJAMwCxoABCAFhG0HgTAbTwnIHpIkFQJViOCAA66ICo6gfu2zZ9/ShxCRArRRUUBgQTKpqNSVjz3ho6JpL0Car/9N24SKCRW1E3NCHpRGSMlLfK7kRMw+03MnBwT8Ly6NUxtYXUs6SCZKtVS+CYXCoQoUsC+lYWmAz//0BPwLegblmBTCNd5OoG28bLINm7r1Aw852S8Qxw6zFHiUvPIeVqgdZcupxa6YBYU6uyK/BuBW/PvxBQrDg0yRyGW2HGivhPoGWjWEKIm2pemguvXCsM4iYS6QEy9boy8gpdW5CO3ba+QuAEMFIOQNOD2d/s5AZ6LT5Hza2qZVI0lYSn2RJRqGqmLEv3igVmnJJKVCaMt1iBJau4y7X+vQgC+gpvEUUNH4Wtxsfiggo/EXkGgCBZQ0iQIKGpOAoHkqoE1fGwE5fZppnTOdMhIYCrwFiBkg1G2sofUkl6XquH28m3vWjX5kHpqbfOR79O8/pP/GrTLiQWjz9YcD3R886KabF0I4tqR6rdsE5ZPNKQNN/ZUWGBi2AwMNVlto4Zkt12Lcll/P0h99mGmZEmZd4Dg5NcWyWNzmFTDlhCPatnHqcTHCPM+L3b9YPDYllVkQFtbTRGK3Plu6zNaesgmyh2HMkUuky+rLVezCcLm42dv72laZ6+Utqr5I2YcdGDhsi2PFAa9OOE4ODdzP2lX1qGv7q23frRiX5bdLDt6Nd11xR3E/kh6yZUr6JjEDbZ6aZdrqyIRDF1jIJcFWw3w8Y1SnDFn9Ru/wzem9zauxcUbIYrJ0Yk/wAiLeGnosPndVbD56dG0vjwUF8wJMHTnT0tzwTEc/glW7J/XOv3Xi4+rgluDVn66dkMP611B9anS4VJFmSTmyB2Drx+yP4bPCIFTnPv9s+jop3NRxw+iPObJsf/OlouTJcn+aWyB70LwAy9b7ZAVs8E/vh7+XHl4pnylfsflnB7pfmX+7gVk+ccCNFp17rZMn6tMtXbrD4Pldkz90ep/flfzfSUp83iH/facPyR2SpE4nruta0LXu+h/mpzod437CnTkVzffBqAvF9zX++eemdJoytfO0vLZb2i9J6jit07TJnSbDxZ+A/3rXiemA7oAklq74b7eBmMRxJInIOdVvdRwnS4rhvOaT/a5MSL8197nU6+B/iTzS3/V+fg04UDzSv/qbh3cO3uz5QrBJEvPZffpvALXsDbb5c5q7q6gk2PX/dxrQ182vMd01vqE8Bu7wXxLomnq12sPc1in+lsnBXpBt2Am0obku6SzIVMZBUpuKynFzodCxFEq11dA2R8ezO4YQECJvYbbxAGGgnZDprxeSga6jctxzKAz3DkoDg4C2rRF8yY7pwbXbnkEURkpSYSE5mtcyXgB7JYN9EGtQU0LRELMHIEHPFciC+QurjY5Ii4Q1jtAb2UKMGZIReA3ZAe6G1Gqe1Al8E6JxbiPGusq8BQfaXimX5jXgZT0BQsEQJZKCBYlD42kx4WzMq/bzfSAsAzWK0IN4kx8AEehxm5MK5Mofgepo1Y5CPMvWekasQhjG8F4MAU+D1AHDiFqrPJKufacmCA3L1TijrFMpjyYxY625+9s17/gatMkVu5FFijyKKKOKOlrRjk78v0d1zh6itKyFi/biDe5Nhykt5g0eJqvA3drKaVk3+hClbbyf9TyvaNZ3PdlTc17P0Tk6AflSZwTelKOgaBWnYT00+7WGHGwaq5uq8TPWRs79hVc4QQMAAAAA') format('woff2'),
  url('../fonts/iconfont.woff?t=1552732675778') format('woff'),
  url('../fonts/iconfont.ttf?t=1552732675778') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg?t=1552732675778#iconfont') format('svg'); /* iOS 4.1- */
}

(3)引入iconfont 和每个icon的相对应的类名就可以了。

如:
在这里插入图片描述


iconfont字体图标在vue脚手架的使用_第5张图片
戳这里svgo https://www.zhangxinxu.com/wordpress/2016/02/svg-compress-tool-svgo-experience/

你可能感兴趣的:(vue-cli)