僞類選擇器添加阿里圖標的方法

 阿里圖標庫下載源碼得到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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章