伪类选择器添加阿里图标的方法

 阿里图标库下载源码得到iconfont.css

@font-face {font-family: "iconfont";
  src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835366254'); /* IE9 */
  src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835366254#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOUAAsAAAAAB5wAAANGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDAIJRATYCJAMMCwgABCAFhG0HPBudBhHVm6/IfhymW4x808ROOcGr3FY7xX8HD5SX/yaTblMJRxgfVPpFnKiTjE2AgLmtTVGdssJEIafEdulu/SP/zwwXwqjPczm9KT7qW5bTmrSm7Um9wwDjgAIda1BAE6QAsWHsgpa4HQIwx1skkZVTVIWGitlPAKJnty7t0DJW1IZSgYbAUDFVtROzMUFTpihngVnB78Ub4tNAwURiDi3rnN2RtOepz0dL3ajT5BGop3MDbBZIIBKoIFoqvXXIKB5JYq6a1OZcAyoCZaqQ0YhApVkMG/3jKSAMmMWWAITChALPUx0ZBDwffQMKABIAA2AKDAIWQdbxNhXp6WRp5mxp1cvyzHV/0bpo2gJYccnCau8Vn8zKq682TnXufGRqUsf5Uxcuc+lyZdqj0wJ9ftuun7nuRu7pa36rr9ZMPaQfnna09cgQcz+La9eqr16tspw6X19gYXXjRu316+2r1utB1RsOesilB+rnz3euWdjqUrtoAcqJtAmPysqsT5ifd75nccKsOmyC3kmDj+VVXv5896F65MABHQeM7DvI4Z/9b3Sv9lMqRvbr4nDv49AsO1vK7Ky4uKwsB4es7IQTvlNSJ6cPTV3C/KbtjtvbKvoE0VF00Ce2Fb0s7o+2RK/ByvJ1coQyfOWamq3GDUkRSe5RTRNdC0MHm/bUXrT/tajKtvLPwo4/zSNpCxjN3kdVIdMA5C5p/4f24/6Pm85tbJK+aRYqALee7YmD+u4W7fx9Av6HW00wmk5VaFpolaqiqDYndE0gyWHkQQpgjjlghEF794dbnLRiEGg4JVAwxQsSjUBSZSNhggWJMKCRCnMi5M62wEF/JEI1A8JNABDY2gUFa45CYuscqbL3YIKzdzBgm4Q5+rfTkkdx1eHMqAQt6D9UhnpnO+QQlj7RT63itDbgvshjFYI8yfKpO/bIU4wYZ1+IOHBMHdzAbti2BANTjUaSIDKUaeqq7pQY6qKDM4YUgSyg/YGKQXrOay4Ohe8/IW/SUrhBVJX/QmxUtQ9yiawDeTf1nUS3csto5hWEcIDDSAfcgBu1VpyAobpTDRkiEQZEB6UUNXJdTcnylu79tgDmzKEyRUihsjnQ9Me9X6t6/6/0FEUAAA==') format('woff2'),
  url('https://at.alicdn.com/t/iconfont.woff?t=1572835366254') format('woff'),
  url('https://at.alicdn.com/t/fonts/iconfont.ttf?t=1572835366254') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('https://at.alicdn.com/t/fonts/iconfont.svg?t=1572835366254#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-shouye:before {
  content: "\e63f";
}

.icon-shangyibu:before {
  content: "\e67e";
}

应用在html中任意标签: 

.class::after{
	content: "\e63f"; 
	font-family: iconfont; 
}
.class::before{
	content: "\e67e";
	font-family: iconfont;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值