best way to implement anchor tag with an svg inside and text

Question

I want to put together a button which has an svg and then some text.

I have implemented it as followed

    <a class="btn btn-subtle-icon">
      <div class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="21px" height="21px" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
         <g>
          <path fill="#797979" d="M17.6,5.5c0-1-1-1-1-1H4.4c0,0-1,0-1,1v1h14.2V5.5z M14.6,2.5H6.4c0,0-1,0-1,1h10.2
                    C15.6,2.5,14.6,2.5,14.6,2.5z M19.6,6.5C19,5.9,19,5.9,19,5.9v1.6H2V5.9c0,0,0,0-0.6,0.6c-0.6,0.6-1,0.8-0.8,2
                    c0.2,1.2,1.4,8.1,1.6,9c0.2,1,1.2,1,1.2,1h14.2c0,0,1.1,0,1.2-1c0.2-0.9,1.3-7.8,1.6-9C20.7,7.3,20.2,7.1,19.6,6.5z M14.6,11.9
                    c0,0,0,1-1,1H7.5c-1,0-1-1-1-1v-2h1.4v1.6h5.3V9.9h1.4V11.9z"/>
         </g>
        </svg>
       </div>
        You can find some of the older CodeClub projects or Partner projects in the archives.
    </a>

The div icon-archive is simply applying display: inline-block; and the btn and btn-subtle-icon are just expanded bootstrap classes.

The trouble I am having comes when I want to start moving up the image or the text to make them align better.

When I attempt to add margin to the svg it just moves the svg and the text down at the same time.

Can anyone point me in the direction of what I’m doing wrong or a better solution?

Much appreciated.

score 1 · Answer 1 · answered Jun 11 '15 at 16:04

1

The first mistake you do is putting <div> inside <a>. Change it to:

<a class="btn btn-subtle-icon">
    <span class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
        </svg>
    </span>
</a>

answered Jun 11 '15 at 16:04

Praveen Kumar Purushothaman

164,888
24
203
252

Out of interest what is wrong with putting a div inside an anchor? – DMH Jun 11 '15 at 16:17
`
` is a block level element. `` is an inline element. Basic HTML, but yes, HTML5 *allows* it!
– Praveen Kumar Purushothaman Jun 11 '15 at 16:18
@Damien http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Praveen Kumar Purushothaman Jun 11 '15 at 16:19
issue I have using span is I need to move the svg up or the text down to ensure they line up together. doesnt allow me to apply margin on the top or bottom. – DMH Jun 11 '15 at 16:21
You can use `a, span {display: block;}`. – Praveen Kumar Purushothaman Jun 11 '15 at 16:23

score 0 · Answer 2 · answered Jun 11 '15 at 16:09

Try separating them and make them float.

<a class="btn btn-subtle-icon">
      <div class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="21px" height="21px" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
         <g>
          <path fill="#797979" d="M17.6,5.5c0-1-1-1-1-1H4.4c0,0-1,0-1,1v1h14.2V5.5z M14.6,2.5H6.4c0,0-1,0-1,1h10.2
                    C15.6,2.5,14.6,2.5,14.6,2.5z M19.6,6.5C19,5.9,19,5.9,19,5.9v1.6H2V5.9c0,0,0,0-0.6,0.6c-0.6,0.6-1,0.8-0.8,2
                    c0.2,1.2,1.4,8.1,1.6,9c0.2,1,1.2,1,1.2,1h14.2c0,0,1.1,0,1.2-1c0.2-0.9,1.3-7.8,1.6-9C20.7,7.3,20.2,7.1,19.6,6.5z M14.6,11.9
                    c0,0,0,1-1,1H7.5c-1,0-1-1-1-1v-2h1.4v1.6h5.3V9.9h1.4V11.9z"/>
         </g>
        </svg>
       </div>
        <div class="text">
        You can find some of the older CodeClub projects or Partner projects in the archives.
    </div>
    </a>



.icon-archive{
    float:left;
}
.text{
    float:left;
    margin-left: 5px;
}

http://jsfiddle.net/Dhanck/zqn1b53e/1/

when I try this it moves both the svg and the text down weirdly — DMH, Jun 11 '15 at 16:29

best way to implement anchor tag with an svg inside and text

2 Answers2