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

在这里插入图片描述

步骤:

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

在这里插入图片描述

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

​ import ‘./common/css/iconfont.css’

注意:要将iconfont.css 文件中src引入的字体路径改成正确的相对路径,如图所示:

在这里插入图片描述

@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的相对应的类名就可以了。

文末

篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值