iconfont矢量图的链接使用

最新推荐文章于 2023-04-04 11:14:04 发布

麦多馅饼

最新推荐文章于 2023-04-04 11:14:04 发布

阅读量884

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript css html

本文链接：https://blog.csdn.net/zhang1509123907/article/details/123621932

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、挑选矢量图标加入购物车

2、把购物车中的图标添加到项目当中

3、点击生成链接，并且在public文件夹下的index.html文件中全局引用

注意：//at.alicdn.com/t/font_3262462_j1yq2h7ic79.css路径前要加上https域名

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!--   引入清除默认的样式   -->
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3262462_j1yq2h7ic79.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

4、在组件中使用矢量图标

此处是动态引用，做了其他逻辑判断

              <ul class="sui-nav">
                <li :class="{ active: isOne }" @click="changeOrder('1')">
                  <a>综合 <span v-show="isOne" class="iconfont"
                              :class="{'icon-yuyin':isAsc,'icon-yuyin':isDecs}"></span></a>
                </li>
                <li :class="{ active: isTwo }" @click="changeOrder('2')">
                  <a>价格 <span v-show="isTwo" class="iconfont"
                              :class="{'icon-yuyin':isAsc,'icon-yuyin':isDecs}"></span></a>
                </li>
              </ul>

iconfont-阿里巴巴矢量图标库

麦多馅饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
iconfont矢量图的链接使用

1、挑选矢量图标加入购物车2、把购物车中的图标添加到项目当中3、点击生成链接，并且在public文件夹下的index.html文件中全局引用注意：//at.alicdn.com/t/font_3262462_j1yq2h7ic79.css路径前要加上https域名<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta ht...
复制链接

扫一扫