I cannot find the problem, please help

Hi, I was trying to input a Font awesome Icon, And did what seemed necessary, but the output comes as unexpected. This is the code I have used:


<!DOCTYPE html>
<html>
<head>
<title>Icons</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<style>
.fas fa-cat{
width: 400px;
height: 400px;
color: black;
}
.fas fa-dog{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="fas fa-cat"></div>
<div class="fas fa-dog"></div>
</body>

The style of the icons makes me feel like the output should come slightly bigger than it is now:
image

Any help is appreciated

How to size icons from FontAwesome Documentation for rescue! As for any library! :slight_smile:

You need to treat it as font not image. That’s why Font Awesome.
By the way the mistake you made is in your CSS.
You need to use:

fas.fa-cat {
  color: red;
  ...
}

NOT

fas[space]fa-cat {
  color: red;
  ...
}

MDN #target_an_element_if_it_has_more_than_one_class_applied

Hi-
Thanks a lot for the suggestion, but it still comes as small.
This is my new code:

<!DOCTYPE html>
<html>
<head>
<title>Icons</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<style>
fas.fa-cat{
color: black;
font-size: 10rem;
}
.fas fa-dog{
color: red;
font-size: 10rem;
}
</style>
</head>
<body>
<div class="fas fa-cat"></div>
<div class="fas fa-dog"></div>

</body>
[you're missing dot here]fas.fa-cat

It worked! Thanks a lot for sticking around to help! :+1:

1 Like

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