css图标—— iconfont

阿里云字体图标

https://www.iconfont.cn/

搜索(如search)->添加到项目->新建项目->输入项目的名称->imooc->确定->图标管理->我的项目

->查看在线链接->点击复制代码

如: //at.alicdn.com/t/font_1938354_qkmgv0wrqn.css

用浏览器查看

@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737'); /* IE9 */
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABnQAAAKHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNCYsKMQslzfV5PE3kH8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbosfP/+19qceajz+nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4WunJ9v3mlWRcuTgdStdgP8H19SPzSMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/oKW1sHx1BXWOMCceY5BtRzXkVhiXqhtmZpEfdCfbpNH3EXfj/+mY86SU1mleyebmyY/yw7JV9XjI/wQUCra5AxBxTisDa6rSQYtaQxWjYC9lUY/KTqW8RejYL9dVZ+M+iDonsSu5JbzU+gxN0jwNqoq0i9XJ3+GH9avXbH7n7y4vlFpLjsNpLu4qT39NS0UJWX1RePlCus8qq6zQ48+uyf/ruOL7n3nwbu/OE9A9eHLyfb8v7Dgj9QMf/IQgHBdTe1XLreVMB3LjN0Vyz62UH9/m3BfxL3bCq61DKnoopr7cnIqLEJjRpRATs7/Y3V9dxUMtTruTV7nf4UsnpjaCHOQY0mi1Cr3io0mrW9ukkXVhKlATMeAIR2z5C0eglZu2+0EH+hRq9/qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWxcqzSjAoPyTkLDc5KQ/Ypce4FcDIcFxPbFBPPMSM/d6YiChUnEW6B0ygME0w58cmSoSuSzkYjVfemoZVE0LSJEYMgNmS6gjyWREz5nUWz9PlDxHEmZOCWsprgKcJyXu9oYmjcA91Wxb3K7uWV3DnHlBAKUlgigrbAIBIKJVBaP8hHLGLIHRFOzYzsdqqvari+JvqAQlaFpU9h98tqz8lgywUAAA==') format('woff2'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.woff?t=1594516550737') format('woff'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.ttf?t=1594516550737') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.svg?t=1594516550737#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e630";
}

在开发项目中新建目录和文件common/css/icons.css

删除一些url和src代码, 只留下base64代码(自定义字体图标库, 建议使用 base64 格式的字体)

@font-face {font-family: "iconfont";
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABnQAAAKHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNCYsKMQslzfV5PE3kH8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbosfP/+19qceajz+nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4WunJ9v3mlWRcuTgdStdgP8H19SPzSMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/oKW1sHx1BXWOMCceY5BtRzXkVhiXqhtmZpEfdCfbpNH3EXfj/+mY86SU1mleyebmyY/yw7JV9XjI/wQUCra5AxBxTisDa6rSQYtaQxWjYC9lUY/KTqW8RejYL9dVZ+M+iDonsSu5JbzU+gxN0jwNqoq0i9XJ3+GH9avXbH7n7y4vlFpLjsNpLu4qT39NS0UJWX1RePlCus8qq6zQ48+uyf/ruOL7n3nwbu/OE9A9eHLyfb8v7Dgj9QMf/IQgHBdTe1XLreVMB3LjN0Vyz62UH9/m3BfxL3bCq61DKnoopr7cnIqLEJjRpRATs7/Y3V9dxUMtTruTV7nf4UsnpjaCHOQY0mi1Cr3io0mrW9ukkXVhKlATMeAIR2z5C0eglZu2+0EH+hRq9/qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWxcqzSjAoPyTkLDc5KQ/Ypce4FcDIcFxPbFBPPMSM/d6YiChUnEW6B0ygME0w58cmSoSuSzkYjVfemoZVE0LSJEYMgNmS6gjyWREz5nUWz9PlDxHEmZOCWsprgKcJyXu9oYmjcA91Wxb3K7uWV3DnHlBAKUlgigrbAIBIKJVBaP8hHLGLIHRFOzYzsdqqvari+JvqAQlaFpU9h98tqz8lgywUAAA==') format('woff2'),
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e630";
}
<i class="iconfont icon-search"></i>