Why can't I resize image in line with text in CSS?

Question

I got the image from and followed the instructions from here but for some reason, it's not working. https://material.io/resources/icons/?search=fire&icon=whatshot&style=baseline http://google.github.io/material-design-icons/

Here is the instructions they gave:

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

This is my html code:

And this is my css code:

/* Navigation Bar */

.navbar {
  padding: 0 0 4.5rem;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}

.material-icons.md-48 { font-size: 48px; }

But no matter what number I change in my css last line, the icon does not become bigger like I want it to. Thanks in advance and thanks for reading

user_9907334 · Answer

Gentleman, I would say there is a very small change in your code.

Add additional class besides the material-icon class from (md-18, md-24, md-36, md-48) as per your requirement.
You have missed one of the closings for div (I have placed a comment in the code).

Please find below code

.colored-section {
        background: #888;
      }
      /* Navigation Bar */

      .navbar {
        padding: 0 0 4.5rem;
      }

      .navbar-brand {
        font-family: 'Ubuntu';
        font-size: 2.5rem;
        font-weight: bold;
      }
      .navbar-dark .navbar-brand {
        display: flex;
        align-items: center;
      }

      .nav-item {
        padding: 0 18px;
      }

      .nav-link {
        font-size: 1.2rem;
        font-family: 'Montserrat-Light';
      }

      .material-icons.md-48 {
        font-size: 48px;
      }


    
    Hello

    
    

    
    
    

    
    

    
    

    
    

    

    
  

  
    
      
        
        
          
          
          whatshothello
          
          
            
              
                Contact
              
              
                Pricing
              
              
                Download

user_824344 · Answer

If your CSS is inside styles.css then you should include that stylesheet after material icons so that it overwrites. Material icons stylesheet has a default font size of 24px. CSS will always apply last rule it finds in all the stylesheets so if the material font size rule is after, whatever you do "above" won't matter.

user_13888590 · Answer

You just have to add .md-48 to your element.

      
        whatshot
      hello

becomes;

      
        whatshot
      hello

Remember, when you create a class you have to APPLY the class to the element.

user_12687879 · Answer

The reason for not changing the size of material-icons is because you didn't include md tag in your code. Correct it as I mentioned below. You can add (md-18, md-24, md-36, md-48) as you want.

Your fonts are white. So nothing was shown. So I add background color to your header section. As your wish you can change it also.

 #title{
    background:black;
  }
  .navbar {
  padding: 0 0 4.5rem;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}

.material-icons.md-48 { font-size: 48px; }

user_12300422 · Answer

If you want the size to be 48px you need to add this class 'md-48' to the span like this

whatshot

if you want it to be 36 just replace it to 'md-36' and so on.

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }



  
    
    
    


  

  
  

  
  

    
    

    Hello, world!
  
  
  
  
    whatshot
  
  

  
    
      
        Contact (current)
      
      
        Pricing
      
      
        Download
      
    
  

  
  
    Hello, world!

user_4829443 · Answer

In your code you forgot link to material themes:

and a closing div is missing before closing section tag.

user_14129711 · Answer

First, to make sure your icon works as it should be, check the following factors:

You must use icon names that are font, not custom text

Example:

date_range

Check check if your element has a font family of Material icons

Change icon size:

You need add md-{number} class to your icon

whatshot

Also from the image above you can see that the icon has a size of 24 pixels just change it in your css.

user_11533649 · Answer

<pre><code><style>  
.gfg { 
    width:auto; 
    text-align:center; 
    padding:20px; 
} 
img { 
    max-width:100%; 
    height:auto; 
} 
</style>  
</code></pre>

user_14184021 · Answer

You need to add the md-48 class to your span element:

...

Admin · Answer

Check the snippet below please, you can bypass default CSS rules and apply your own on the icons, for example in the snippet below there are some changes so that all navbar elements are centered vertically.

/* Navigation Bar */
:root {
  --md-size: 48px;
  --sm-size: 36px;
}
#title {
  background-color:#000;
}
.navbar {
  padding: 0;
  margin: 0;
  line-height: var(--md-size);
  min-height: var(--md-size);
}
.navbar-brand *{
  padding: 0;
  margin: 0;
}
.navbar-brand .material-icons{
  align-self: center;
  vertical-align: middle;
}
.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold; 
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  place-content: center space-evenly;
}


.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}
#title .material-icons {
  font-size: var(--sm-size);
}
#title .material-icons.md-48 {
  font-size: var(--md-size);
}

Why can't I resize image in line with text in CSS?

10 Answers