如何让菜单图标变小

菜单图标虽然可以美化页面，但是有时候过大可能会影响用户体验，因此让菜单图标变小也是很有必要的。下面介绍几种让菜单图标变小的方法。

1、使用CSS缩小图标

使用CSS样式可以轻松缩小菜单图标，只需要给样式中的图标设置height和width属性即可。例如：

.menu-icon {

height: 15px;

width: 15px;

注意，如果图标是基于字体库的，那么可以通过修改字体大小来缩小图标。例如：

.menu-icon {

font-size: 15px;

2、使用SVG缩小图标

如果菜单图标是SVG格式，可以使用外部编辑器将图标缩小并重新导入网站。如果不想依赖外部编辑器，可以使用在线SVG编辑器，如https://editor.method.ac/，简单地将图标缩小。

3、使用JavaScript动态缩放图标

如果需要根据用户设备等因素动态改变菜单图标大小，可以使用JavaScript编写代码，通过操作CSS样式表动态缩放图标。例如：

var menuIcon = document.getElementsByClassName('menu-icon');

for (var i = 0; i < menuIcon.length; i++) {

menuIcon[i].style.height = "15px";

menuIcon[i].style.width = "15px";

4、使用响应式框架

如果您的网站使用响应式框架（如Bootstrap），可以根据设备屏幕宽度自动调整菜单图标大小。例如：

<i class="menu-icon fas fa-align-justify fa-lg d-lg-none"></i>

<i class="menu-icon fas fa-align-justify fa-md d-none d-lg-inline"></i>