Not able to resize Google icons on Codepen

HTML-CSS
1

When I was trying to move my “product landing” project onto Codepen, the font-size attribute seems to have no effect. The same code worked well on freeCodeCamp as well as on my own local files.
It would be appreciated if anyone can tell me where the problem lies. :smiley:

Link to the pen: https://codepen.io/SnapdragonCao/pen/qBoqZKJ

In line 1 and line 27 of HTML code I linked and used the icons as follows:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- some other code -->
<div class="icon">
  <i class="material-icons">piano</i>
</div>

And I styled these icons in line 116 of the CSS file as:

.material-icons {
  display: block;
  font-size: 6rem;
  color: #576f72;
}
2

@SnapdragonCao
Please can you explain to me how your icon logo for piano appeared because i’ve been trying to have a flame logo appear on my landing page & it just won’t appear…Here’s my code below…

 <div class="container">
   <section id="features">
     <div class="features">
       <div class="icon"><i class="https://media.istockphoto.com/vectors/creative-abstract-fire-logo-vector-id1146078779?k=20&m=1146078779&s=612x612&w=0&h=Vg1ppYlTL_jJTBmJpQW5KdcA5NOwZ6PFPnWxI3iT-Zs="></i>
3

You cannot use random ordinary jpg images as those you found in the Font Awesome library.

To be more specific, icon libraries like Font Awesome or Google Icons are pre-defined and can be accessed with corresponding syntax like <i class="fa-solid fa-bars"></i> (the fa here stands for “Font Awesome”).
But this method doesn’t apply to the picture you want to use. Just treat your picture as a normal one with <img> tag.

4

Hi

From what I can see on dev tools, it looks like the Google stylesheet is overriding your css.
I don’t know why - maybe because the stylesheets are in a different order on Codepen?

If I change your css selector to
i.material-icons
that seems to correct the problem.

5

Thank you! I see the problem now.
The stylesheet is overriden because I placed the icon stylesheet in the body part ( just realized I should change the <head> in the pen settings. How foolish I am :sweat_smile: )

Besides, may I know how to use the dev tools to check the Codepen result page like you did? Or did you just download it and open from local files? Many thanks!

6

I just right-clicked on one of the icons in your web page and chose “inspect”.
That opens up dev tools where you can see the styles applied to that element.

That’s always worked for me, butI must admit that I’ve never tried to find out if there’s a “better” way to access dev tools from Codepen.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.