1

I am having trouble placing labels directly under a span element. If this was an input that I needed the label under, I would assign a name attribute to the input element and assign a for="name" attribute to the label. However, I am not able to assign a name attribute to a span.

I have to use a span because I want to use these IcoMoon icons that must be placed inside a span.

Currently, I am stuck with the label either on the left or right of the span. I can not seem to get it to be centered under the span element.

Here is my code:

@font-face {
 font-family:icomoon;
 src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda);
 src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda) format("embedded-opentype"),
         
        url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda) format("truetype"),
        url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda) format("woff"),
        url(fonts/2ad343be.icomoon.svg#icomoon) format("svg"),url(fonts/69e79c77.icomoon.woff) format("woff"),
        url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon) format("svg");
              
}
.icon-bubbles{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:36px;
    color:#f00;
    border: 1px solid white;
}

.icon-bubbles:before {
    content: "\e613";
}

#back {
    width: 400px;
    height: 200px;
    background: black;
    color: white;
}

table {
    border-collapse: collapse;
    margin-left: 5%;
}

table, th, td {
    border: 1px solid white;
    height: 80px;
}

label {
  border: 1px solid white;
}
<div id="back">
  <br>
  <table border>
    <tr>
      <td>
        <span class="icon-bubbles"></span>
        <label>Label Text</label>
      </td>
      <td>
        <span class="icon-bubbles"></span>
        <label>Label Text</label>
      </td>
      <td>
        <span class="icon-bubbles"></span>
        <label>Label Text</label>
      </td>
    </tr>
  </table>
</div>

Here is a link to the JSFiddle: http://jsfiddle.net/8Lffy7sg/

bicycle_guy
  • 299
  • 4
  • 15
  • 2
    What sense is using label elements supposed to make, if you don't have any input field associated with them ...? – CBroe May 19 '16 at 19:42
  • You don't **have** to use icomoon on a span, any element that can have a `:before` (almost everything but inputs, images, ...) can also have an icon class on it, so it should work just fine on your labels as well. Personally I always use an `i` element, like fontawesome does. – Pevara May 19 '16 at 19:47

3 Answers3

3

You shouldn't be using the table element for layout for one thing, since table should only be used for tabular data. Because of this, I've re-structured the HTML so it is using div. Next, you just want to have the span element to be display:block, which will cause the element to act like a div and cause a line break to occur for elements following.

Additionally, labels are designed to be used for forms, to label an input field. If you just want some text associated with the span, just use another span or a p tag.

@font-face {
  font-family: icomoon;
  src: url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda);
  src: url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda) format("embedded-opentype"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda) format("truetype"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda) format("woff"), url(fonts/2ad343be.icomoon.svg#icomoon) format("svg"), url(fonts/69e79c77.icomoon.woff) format("woff"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon) format("svg");
}

.icon-bubbles {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 36px;
  color: #f00;
  border: 1px solid white;
}

.icon-wrapper {
  float: left;
}

.icon-wrapper span {
  display: block;
}

.icon-bubbles:before {
  content: "\e613";
}

#back {
  width: 400px;
  height: 200px;
  background: black;
  color: white;
}

label {
  border: 1px solid white;
}
<div id="back">
  <div class="icon-wrapper">
    <span class="icon-bubbles"></span>
    <label>Label Text</label>
  </div>
  <div class="icon-wrapper">
    <span class="icon-bubbles"></span>
    <label>Label Text</label>
  </div>
  <div class="icon-wrapper">
    <span class="icon-bubbles"></span>
    <label>Label Text</label>
  </div>
</div>
Community
  • 1
  • 1
Kyle Falconer
  • 8,302
  • 6
  • 48
  • 68
  • I would advise against the choice for `icon-wrapper` as a class name since icomoon uses a `[class^="icon"]` selector iirc, and they might collide – Pevara May 19 '16 at 19:50
  • Well that's a stupid choice for icomoon that they use such a naming convention such that it would collide so easily... regardless, the name is arbitrary, it could be anything. – Kyle Falconer May 19 '16 at 19:56
  • Not sure if it is stupid when it drastically reduces the amount of css if the number of icons increases. Also not sure if it will actually collide, just thought it might be worth mentioning here. Better safe then sorry... – Pevara May 19 '16 at 19:59
  • 1
    No it's just a poor choice on their end. They should have picked something unique like '[class^=iconmoon-'] – Kyle Falconer May 19 '16 at 20:00
1

I added the following CSS:

td {
  text-align: center;
}

Which made each td element display its contents centered.

I also added:

.icon-bubbles {
  display: block;
  margin: 10px 30px;
}

Which makes each .icon-bubbles display as a block element (causing a line break, forcing the label below the icon). I reduced your margins so you can more clearly see the example.

You can view the JSFiddle here.

pinjasaur
  • 418
  • 3
  • 6
  • This works with the table implementation I was trying to do. The other example requires me to change everything to divs, which is much more complicated. Thank you! – bicycle_guy May 20 '16 at 18:05
  • @bicycle_guy it doesn't matter what you use, `div` or `td`, either would work, but you really should change it to `div` anyway because using `table` for layout is 100% wrong for websites and is horrible for accessibility reasons. – Kyle Falconer May 20 '16 at 21:23
0

You could try putting the <span> and the <label> each inside a div with width:100% and text-align:center like this: 

 <div style="width:100%;text-align:center">

      <span class="icon-bubbles"></span>
 </div>

 <div style="width:100%;text-align:center">

      <label>Label Text</label>
 </div>

cthefinal
  • 79
  • 1
  • I understand you're using the style attribute for simplicity to get the point across, but using the style attribute on HTML elements is bad practice and should **ALWAYS** be avoided. – Michael Schwartz May 19 '16 at 20:20
  • Agree, but depending on what environment he's/she's working, inline styles could be useful. – cthefinal May 20 '16 at 11:39
  • I disagree your HTML, CSS and JS should always be separate. – Michael Schwartz May 20 '16 at 16:01
  • As "best practice", yes. But there are cases in which inline styles are best. For example, sending emails. Also, inline's great if you're only going to apply style to only one element; it wouldn't make much sense creating a – cthefinal May 20 '16 at 16:35
  • 1
    [I see where you're going](https://css-tricks.com/using-css-in-html-emails-the-real-story/) – Michael Schwartz May 22 '16 at 04:38