关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

vue如何使用icon阿里字体图标

发布2022-06-14 浏览761次

详情内容

这是一个

vue怎么使用icon字体库,以阿里巴巴https://www.iconfont.cn/矢量字体库为例,讲下如何在vue里引入阿里巴巴字体库。
1 先建空项目,2搜索想要的图标,3加入购物车,4生成代码 ,5在项目里的index.html引入 使用 link-css标签 将复制生成的代码替换href的路径 6用在标签的class上 前缀加 iconfont 后面复制得到的图标名称    在"项目设置里"可以修改前缀  修改(Font Family),上面那个不改就让是空  FontClass/Symbol 前缀




例如:vue
   1  <!-- 引入icon字体图标 link-css-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2954589_ye2o2yfsdp.css">

   2     <div class="iconfont top">22222</div>


微信小程序不支持css样式,所以无法直接引入生成代码链接,解决方法,将生成链接在url地址栏中打开,复制一下,在static建个文件夹,复制上代码,在全局样式中引入。必须加icon iconfont  xxx图标名称 
weapp的样式是icon ,  普通标签是class="icon iconfont top"  ,  /* 类名就是前缀 iconfont 控制样式*/ 
之前写过微信小程序的可以去瞅瞅


,可点击上面演示按钮看HTML页面效果,有需要可直接下载或开通SVIP终生会员全站免费下载。
点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载