【Vue】vue项目网页标题栏ico小图标修改调整

步骤1:

将logo图片文件复制到public文件夹中
在这里插入图片描述

步骤2:

找到index.html文件,将link标签中的图标路径名favicon.ico改成logo.jpg(png格式同理)

步骤3:

刷新网页,图标更新成功
在这里插入图片描述
在这里插入图片描述

补充

1、logo里面的文字过小不清晰时,建议简化logo,例如:
在这里插入图片描述
在这里插入图片描述

2、图标大小;

  • 一般一个图标文件会同时包含3种大小:
    • 查看方式为平铺的时候是48 x 48。
    • 查看方式为图标的时候是32 x 32。
    • 查看方式为列表的时候是16 x 16。
  • vue项目标题的logo图标大小为32*32px;
    在这里插入图片描述
Vue项目中,设置网页名字导航栏图标通常是通过配置`index.html`文件中的`<head>`部分来实现的。以下是一些常见的方法: 1. **使用Favicon**: Favicon是网页标签栏上的小图标。可以通过在`public`文件夹中添加一个`favicon.ico`文件,并在`index.html`中引用它。 ```html <!DOCTYPE html> <html lang="en"> <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>Vue Project</title> </head> <body> <noscript> <strong>We're sorry but vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> ``` 2. **使用图标库**: 可以使用像Font Awesome这样的图标库来添加图标。可以通过npm安装Font Awesome,然后在`main.js`中引入。 ```bash npm install --save @fortawesome/fontawesome-free ``` 在`main.js`中引入: ```javascript import Vue from 'vue'; import App from './App.vue'; import '@fortawesome/fontawesome-free/css/all.css'; new Vue({ render: h => h(App), }).$mount('#app'); ``` 然后在`App.vue`中使用图标: ```html <template> <nav> <ul> <li><i class="fas fa-home"></i> Home</li> <li><i class="fas fa-user"></i> About</li> <li><i class="fas fa-envelope"></i> Contact</li> </ul> </nav> </template> <script> export default { name: 'App', }; </script> <style> nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } </style> ``` 3. **自定义图标**: 如果你有自定义的图标,可以使用`<img>`标签或背景图片来设置。 ```html <template> <nav> <ul> <li><img src="@/assets/logo.png" alt="Logo"> Home</li> <li><img src="@/assets/logo.png" alt="Logo"> About</li> <li><img src="@/assets/logo.png" alt="Logo"> Contact</li> </ul> </nav> </template> <script> export default { name: 'App', }; </script> <style> nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } nav img { width: 20px; height: 20px; } </style> ``` 通过以上方法,你可以在Vue项目中设置网页名字导航栏图标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值