Mui 引入阿里图标 (如何增加自定义icon图标)

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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值