span within a tag with same space

Question

I wanna put a span within an a tag that covers all the same space(I mean the span with same space(width and height) of tag)

<a class="a-tab">
   <span class="fa fa-fw fa-plus">
</a>

.a-tab{
     float: none;
     display: inline-block;
     color: #333333;
     padding: 0.571em 1em;
     font-weight: 700;
}

.fa-fw{
    width: 1.28571429em;
    text-align: center;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

 }

so the problem is that I can't change the tag because it's from a lib and the fa plus icon. The only thing I can change is the <span>, maybe with a <div>. But it seems doesn't work. I tried to put a width: 100% and height: 100% but still not works.

Any suggestions?

Your span should be the one giving its size to your a tag. If you want your link to wrap around your span you should first remove the padding from the link. — J Dubuis, Apr 23 '20 at 08:16
Sure you can...you just add another rule or class...why do you think you can't? Libraries are just helpers you can adapt them as you need. — Paulie_D, Apr 23 '20 at 08:26

score 2 · Answer 1 · answered Apr 23 '20 at 08:18

2

Try adding these styles:

a.a-tab {
    position: relative !important;
}

a.a-tab span {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

answered Apr 23 '20 at 08:18

Sergej

2,030
1
18
28

`The only thing I can change is the , maybe with a ` - didn't you tell, you can? – Sergej Apr 23 '20 at 08:20
The library is known as FontAwesome. I've used it on several projects. And there was no problems with styling. – Sergej Apr 23 '20 at 08:22
I edited the question, sorry I don't know why it was not correct. However it's part of PrimeNG component. – travis_911 Apr 23 '20 at 08:23
If you use Angular, then components have encapsulated styles. Check this out: https://stackoverflow.com/questions/40131174/what-is-best-way-to-override-the-style-of-primeng-components – Sergej Apr 23 '20 at 08:27
yes I can use ::ng-deep.. the problem with padding: 0 as you suggested it's that it change the height and width in a wrong way. the tab are in the each
list that are tabs. if I change the padding it lost the right size

travis_911

Apr 23 '20 at 08:30

I did not tell anything about padding. – Sergej Apr 23 '20 at 09:17

span within a tag with same space

1 Answers1