I have an <ul> list which is in the first cell in my 4 col grid but I have an issue with my icon which is getting smaller than the other ones. I know why it happens but I don't know how to solve that.

In the first <li> I have an icon and a <span> element with a text inside of it.

The thing is that my text is larger than the grid cell, and the lines of it are stacking upon one of each other which is ok but with every stacked line my icon gets smaller and smaller in width. Instead of having a width=24px it has like 10px. The height is still ok. Here is a photo of how it looks:

Here is some of my HTML code:

.footer-logo {
  margin-bottom: 3.6rem;
}

.huddle-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  background-color: var(--Very-Dark-Cyan);
  align-items: center;
  justify-items: center;
  padding: 12.8rem 9.6rem 6.4rem 9.6rem;
  margin-top: 12.8rem;
}

.about-us:nth-child(2) {
  justify-self: end;
}

.location,
.phone-number,
.email-address,
.detail,
.copyright {
  color: var(--very-pale-cyan);
  font-size: 1.2rem;
}

.detail:link,
.detail:visited {
  text-decoration: none;
}

.detail-hover:hover,
.detail-hover:active {
  text-decoration: underline;
}

.copyright {
  font-size: 1.2rem;
}

.copyright-and-icons {
  display: flex;
  flex-direction: column;
  justify-self: center;
}

.social-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: hsl(193, 100%, 96%);
  border: 1px solid hsl(193, 100%, 96%);
  border-radius: 50%;
  padding: 0.4rem;
  transition: all ease-out 0.3s;
}

.address-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: hsl(193, 100%, 96%);
}

ul {
  list-style-type: none;
}

.info {
  display: flex;
  gap: 1.6rem;
}

.mg-left {
  margin-left: 1.6rem;
}

.footer-social-icons {
  display: flex;
  gap: 1.4rem;
}

.social-icon:hover,
.social-icon:active {
  fill: hsl(322, 100%, 66%);
  border: 1px solid hsl(322, 100%, 66%);
}

<footer >
  <div >
    <img  src="images/logo.svg" alt="huddle logo" />
    <ul >
      <li >
        <ion-icon  name="location-outline"></ion-icon>
        <span >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua
              </span>
      </li>
      <li >
        <ion-icon  name="call-outline"></ion-icon>
        <span >  1-543-123-4567 </span>
      </li>
      <li >
        <ion-icon  name="mail-outline"></ion-icon>
        <span >[email protected]</span>
      </li>
    </ul>
  </div>
</footer>

CodePudding user response：

I looked at you code, after some playing around the solution was just to wrap your <ion-icon> in a div, like this:

<div><ion-icon  name="location-outline"></ion-icon></div>

Please update if it worked for you. Good luck :)