iconfont 在Vue在线引用

2019-07-24  本文已影响0人  hai_phon

1.官方使用文档:iconfont使用方法
2.项目在线引用:
2.1拷贝css和js在线地址

拷贝css和js地址.png
注意事项:Font Class拷贝css地址,Symbol对应js地址,上面这两个地址都可能会变化,如果ui上传了新的图标,你需要引用他新增进来的,则需要更新地址:
如图:
2.2代码中引用:
 <script src="//at.alicdn.com/t/font_1299623_htra47f0zzt.js"></script>
<style lang="stylus">
  @import '//at.alicdn.com/t/font_1299623_htra47f0zzt.css'
</style>

2.3引用这个图标:

image.png
image.png
html模板实现
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icondelete"></use>
</svg>

pug模板实现

  .icon
        svg.ali_icon(aria-hidden="true")
          use(xlink:href="#icondelete")
上一篇 下一篇

猜你喜欢

热点阅读