我从谷歌字体中添加了两个图标，但在我看来，当时只有一个有效，这两个图标是我的导航的汉堡图标和关闭图标
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=menu" />
</head>
that is my head section
<nav class="navbar">
<a href="#" class="logo">Coffee <span>.</span></a>
<ul class="menu-links">
<span id="close" class="material-symbols-outlined">close</span>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Contact us</a></li>
</ul>
<span id="menu-btn" class="material-symbols-outlined">menu</span>
</nav> '
导航中的两个跨度将是我的图标在此处输入图像描述
您只需要链接到一个谷歌字体样式表。要包含两个或更多图标，请将它们作为逗号分隔列表传递到
icon_names<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close,menu" />