首页 > 自考资讯 > 自考知识

css图标旋转180度,css图标和字体水平对齐

头条共创 2024-06-27

阿里云字体图标

https://www.iconfont.cn/

搜索(搜索等) - 添加到项目- 新建项目- 输入项目名称- 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 ,d09GMgABAAAAAAALUAAsAAAABnQAAAKHAEAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNCYsKMQslzfV5PE3kh8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbos 9qceajz +nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4Wu nJ9v3mlWRcuTgdStdgP8H19SPzSMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/okW1shHx1 kVhiXqhtmZpEfdCfbpNH3EXfj/+mY86SU1mleyebmyY/yw7JV9XjI/wQUCra5AxBxTisDa6rSQYtaQxWjYC9lUY/KTqW8RejYL9dVZ+M+iDonsSu5JbzU+gxN0jwNqo q0i9 XJ3 + GH9av Knoopr7 cnIqLEJjRpRATs7 /Y3V9dxUMtTruTV7nf4UsnpjaCHOQY0mi1Cr3io0mrW9ukkXVhKlATMeAIR2z5C0eglZu2+0EH+hrq9 /qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWxcqzSjAoPyTkLDc5KQ/Y pce4FcDIcFxPb CWsprgKcJyXu9oYmjca91Wxb3K7uWV3DnHlBAKUlgigrbAIBIKJVBaP8hHLGLIHRFOzYzsdqqvari +JvqAQlaFpU9h98tqz8lgywUAAA==') format('woff2'),url('//at.alicdn.com/t/font_1938354 _q kmgv0wrqn.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: 正常;-webkit -font-smoothing: 抗锯齿;-moz-osx-font-smoothing: 灰度;}.icon-search:before {content: '\e630';} 创建一个新目录,创建common/css/icons。开发项目。

删除部分URL和src代码,仅保留base64代码(自定义字体图标库;我们建议使用base64格式字体)。

@font-face {font-family: 'iconfont';url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAALUAAsAAAAABnQAAAKHAAEAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNC KMQs lzfV5PE3kH8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbosfP/+19qceajz+nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4WunJ9v3mlWRcuTg gP8H19 SPz SMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/okW1sHx1BXWOMCceY5BtRzXkVhiXqhtmZpEfdCfbpNH3EXfj/39NS 0UJWX1RePlCus8q q6zQ48+uyf/ruOL7n3nwbu/OE9A9eHLyfb8v7Dgj9QMf/IQgHBdTe1XLreVMB3LjN0Vyz62U H9/m3BfxL3bCq61DKnoopr7cnIqLEJjRpRATs7/Y3V9dxUMtTruTV7n f4UsnpjaCHOQY0mi1 Cr3io0mrW9ukkXVhKlatMeAIR2z5C0eglZu2+0EH+hRq9/qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWx cqzSjAoPyTkLDc5KQ/Ypce4FcDicFxPbFBPPMSM/d6YiChUnEW6B 0ygME0w58cmSoSu 9 8tqz8lgywU AAA==') 格式('woff2'),} .iconfont {字体-family: 'iconfont' !重要;font-size: 16px;font-style: 正常;-webkit-font-smoothing: 抗锯齿;-moz-osx-font-smoothing: 灰度;}.icon -search:before {content: '\e630 ';} i class='iconfont 图标搜索'/i

版权声明:本文由今日头条转载,如有侵犯您的版权,请联系本站编辑删除。

猜你喜欢