CODEWITHSUNDEEP
cssangularangular-materialstyling
Harry Nguyen
Harry Nguyen

Reputation: 21

Why are my icons showing duplicates of image?

I am trying to create social icons at the bottom of my page but it is showing multiples of the same image.

Here is my code:

<div class="social">
    <span *ngFor="let socialLink of footerContent.socialLinks">
      <a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}>
        <mat-icon></mat-icon>
      </a>
    </span>
  </div>

This is what the image looks like

enter image description here

How can I style it so that it only shows one perfectly fit image per icon?

Upvotes: 0

Views: 397

Answers (1)

MistaPrime
MistaPrime

Reputation: 1677

It would be hard to give precise solution without a link to your site. But from the picture it seems the image duplicates as it is set as a background, maybe the box is too big hence the background repeats. Perhaps this CSS can help:

.social a {
  backgrouind-repeat:no-repeat;
}

Or this one:

.social a {
  max-width:20px;
}

Upvotes: 2

Related Questions