1、官网教程:https://ask.dcloud.net.cn/article/128
2、打开阿里图标官网,添加图标至购物车,下载代码(https://www.iconfont.cn/)
4、解压 压缩包,提取 iconfont.css 和 iconfont.ttf 两个文件。
5、把iconfont.tff 放到项目目录 fonts 里边,修改iconfont.css。
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1582271616244'); /* IE9 */
src: url('iconfont.eot?t=1582271616244#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQMAAsAAAAACHQAAAO9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqENINUATYCJAMQCwoABCAFhG0HRBtCB8geCTZOdAs1c8bg+Y8t/fuYgRCIKBWjqrICG2LsYWn7xUUSIMCpVP8NuJz+SiCbB5TjGNvWpDkszaI0DWxPbHMUWCHG2DB25UUchwAO3Q0hc+YtWYONxhgngLRGhQx2yoSuSRVsBKtkqUZOwMQ2jjSeAY73vy9fMyobDEyFMXVFODfPjM/4rK864P8D2OISiMdzAGwVKGAI0CBNpa4sKowMoXCU3ppxwMbGgLE6Kj7r+38k2YvKNlX0/eMZIBZGcgUAY2BUwWfYolhdAQ0IVPeFSRgAL2SJDdSDq4HnMHRdx8mxcLzeA6XctFui0U62tkxpe+y17qedfvqpjWe+OPb2l7uEv9ypDee8stctL3TllVfWcOoFfY66p+OZ97rVl97d47y7+lx2UQc58LV1ct5LUy69shMHXNn46qtw7oNjj7608ZRLnKrTLvNOP929/eEe8vrr60+/WuTsqzc757549MsHvnTUCxkwoyQOrjjrKqlY58JvjBOrKl25Zm0hqaaKavJSkXHWF9bmG9e8uHL2kdaRPz1uxR898MBLsXf7T6J8z/y7m7PPnYH2VnduP1q2PaL+uKXxom7dHqo/zn+uru68Fbf8oR7Znj0609nTLPT3EK/ae3lZw5riuscHXneAtqoq+xvHznDt8r/NA64b+DiLN+2xwHvFrPZkDzbvvdGsXWI2/bdvtBO97nXl4KvK5coLeg7uue+gQYMHrbZf3vXQHmfvucrYlrJ49qfRvFXzBs87XSGzjk3mGEu7Vc2Z3bMjRQD+p45UiwG0Ia8BqOOMb//2MFbnDq7aXj3lV9u93La3dl57gO/5nzb6iX6ZuLX435Zpgf9rg0sNs9ayGy2+SGNrskheksqJpX80AXXeG0PT2DoZBJtGDIMyukFh04fUrCEwcRkDC5vpcBhs/mqXegkK0eXAIIcCCDWuh0EV90NR41lSs96FiedbWNSk4LBO6rd06VfkzE6CTBrk/eyefpSL20PLmjpB6qqgsLM1kySlPmddkJQivz9y2IhsfH7QHiRjzCjtKoxK09APk7jNnwdOC1pbY7+YxM1BLh3WlKbFScOHh2VPGpaL23CYTUJAhpSAPL4se+KLyBHTTui2TnFyn19FQIGdtJIhqampCK8jIKFE1L1vpGFGtCDnq9pb1VzLOSV2UWCUlJQQX0hCTBu+ecAR0GpGYnzF8kHNBORIGaapR6jIJMNRo7Ctatj8mrYnrOEh1jGmaTFEiRYTa48oE9t7lBWC9kJ+Z1yWz5SaouYIAAAAAA==') format('woff2'),
url('iconfont.woff?t=1582271616244') format('woff'),
// 修改此处
url('../fonts/iconfont.ttf?t=1582271616244') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1582271616244#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xiaoxi:before {
content: "\e60c";
}
.icon-gengduo:before {
content: "\e625";
}
.icon-dashiji:before {
content: "\e600";
}
6、在html 页面中引入 iconfont.css。
// 引入
<link href="css/iconfont.css" rel="stylesheet" />
// 使用
<a class="mui-action-back iconfont icon-xiaoxi mui-pull-right mui-a-color"></a>