2024年最全iconfont字体图标在vue脚手架的使用，前端小厂面试

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

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

如：<i class="iconfont icon-menu-two">

---

戳这里svgo https://www.zhangxinxu.com/wordpress/2016/02/svg-compress-tool-svgo-experience/

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。