[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题

最新推荐文章于 2024-05-10 10:19:31 发布

骨月

最新推荐文章于 2024-05-10 10:19:31 发布

阅读量1w

点赞数 12

分类专栏： vue-element-admin 文章标签： vue

本文链接：https://blog.csdn.net/u013998349/article/details/110231663

版权

vue-element-admin中设置icon+浏览器+侧边栏等图标、标题

一、设置图标ICON：
二、设置浏览器图标和文字：
三、设置侧边栏图标和文字：
- （1）//src/settings.js：开启侧边栏
- （2）//src/layout/components/Sidebar/Logo.vue：设置图片和文字

一、设置图标ICON：

1、引入图标ICON：

https://www.iconfont.cn/
可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。
在这里插入图片描述

2、使用步骤

（1）.src/router/index.js

直接在meta: { title: ‘主页’, icon: ‘dashboard’ }的icon后面输入icon的名字就行。
在这里插入图片描述

参考资料：

https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E7%94%9F%E6%88%90%E5%9B%BE%E6%A0%87%E5%BA%93%E4%BB%A3%E7%A0%81

二、设置浏览器图标和文字：

如下面效果：
在这里插入图片描述

1、设置浏览器图标

图标：public文件夹下的index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--浏览器的图标-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to c

最低0.47元/天解锁文章

骨月

关注

12
点赞
踩
47

收藏

觉得还不错? 一键收藏
4
评论
[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题

vue-element-admin中设置icon图标一、引入图标ICON：二、使用步骤1.src/router/index.js参考资料：一、引入图标ICON：https://www.iconfont.cn/可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。二、使用步骤1.src/router/index.js直接在meta: { title: ‘主页’, icon: ‘dashb
复制链接

扫一扫