0

My code consists of the following:

<div class="site-logo">
  <a href="https://www.fakedomain.net/index.php/" class="site-logo-link">
    <span class="site-logo-icon">
      <i style="background-image:url(https://www.fake.net/logos/image.png)"></i>
    </span>
      <span class="site-logo-name" style="display:none;">asdfasdf</span>
  </a>
</div>

I'm attempting to resize the height background image of the i tag to 100px. I realize that I could insert an inline style to the i tag; however, I would rather change the height from within a .css file. I tried without success:

.site-logo-icon i {
    height: 100px;
}
dottedquad
  • 1,371
  • 6
  • 24
  • 55
  • 5
    Inline elements have no height. Your CSS selector is correct, but it won't be applied unless you change the display to block – j08691 Oct 16 '16 at 02:52
  • 2
    I would strongly advise using a more appropriate element here - either `` or just adding a background to the span or the div itself. The `` tag [isn't meant to be used for icons](http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span). – fstanis Oct 16 '16 at 02:56
  • I agree. I'm using a social network php script and I scratched my head after I dove into the code and saw that. – dottedquad Oct 16 '16 at 02:58

2 Answers2

1

You can use inline-block to allow use of a height and width.

You should also put the background image in the CSS, or use an img tag.

.site-logo-icon i {
    display: inline-block;
    height: 100px;
    background-image:url('https://www.fake.net/logos/image.png');
}
user2182349
  • 9,569
  • 3
  • 29
  • 41
0

You have to set the i tag as a block level element:

.site-logo-icon i {
     display: block;
}
Jay Zangwill
  • 1
  • 3