步骤:
(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页