Html Question posted in
Some basic documentation can be found here.

Html – Why can i not add two google fonts icon simulteaneously?

i have added two icons from google fonts but however it seems to me that only one works at the time the two icons are the hamburger icon for my nav and the close icon

<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> '

the two span inside my nav would be my icons

enter image description here

Tags:

2

Answers


  1. 0

    You only need to link to one google font stylesheet. To include two or more icons, pass them as a comma separated list after the icon_names parameter:

    <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" />
    Login or Signup to reply.
  2. 0

    In addition to jpneey’s answer explaining the correct application of a comma separated icon_names query parameter:

    You only see the second icon (menu) because the second query will take precedence as the crucial font properties – font-family, font-weight, font-style ; are identical:

    1. close icon

    @font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejHd8YwE9fvA&skey=b8dc2088854b122f&v=v222) format('woff2');
}

    2. menu icon

    @font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejHd4WyU5Z&skey=b8dc2088854b122f&v=v222) format('woff2');
}

    <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" />
<p>
  <span class="material-symbols-outlined">close</span>
  <span class="material-symbols-outlined">menu</span>
</p>

    The icon_names query parameter is just an abstraction – optimized for Material icons – for the common google font API text query parameter (used for custom character based substitutions). The actual font-loading is based on the returned CSS @font-face rule.

    The API request https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close translates to:

    • load "Material Icons Outlined" font with:
    • opsz:24 – optical size axis value of 24
    • wght:400 – weight 400 (regular)
    • FILL:0 – take outline/non-solid design variant
    • GRAD:0 – similar to weight but more comparable to a scale transformation to emphasize certain icons
    • icon_names:close – only include the close icon

    If you concatenate all required icons in the icon_names parameter the API returns a suitable subset – only including the specified icon names.

    @font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejHd8YwE9fvI8c8tGT6g&skey=b8dc2088854b122f&v=v220) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
    <!--
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=menu,close" >
-->
       

<span id="close" class="material-symbols-outlined">close</span>
<span id="menu-btn" class="material-symbols-outlined">menu</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search