1

I have developed a webpart. Inside this webpart I have created the a href below:

<a title="Mail a friend" href="https://www.myCompany/vacancies.aspx?id=35382" target="vacatureIframe"><span class="ms-list-addnew-imgSpan16"><img class="ms-list-addnew-img16" id="idHomePageNewDocument-WPQ4-img" src="/_layouts/15/images/spcommon.png?rev=23"></span><span>Mail a friend</span></a>

It shows an icon before the hyperlink. When I go to this image I see allot of small icons:

https://www.myCompany/_layouts/15/images/spcommon.png?rev=23

enter image description here

this class shows at this moment the + icon:

ms-list-addnew-imgSpan16

But I would like to show the envelope icon. Which class do I need to use? And is there some way I can know all the class names of all the icons?

UPDATE! I have try to generate css on the website of Sprite Cow. It generates this css:

.sprite {
        background: url('/_layouts/15/images/spcommon.png?rev=23') no-repeat -236px -30px;
        width: 14px;
        height: 14px;
    }

This is the original html where I see the + icon:

<a class="vacatureHyperlink" title="Solliciteer" href="http://www.google.com" target="vacatureIframe"><span class="ms-list-addnew-imgSpan16"><img class="ms-list-addnew-img16" id="idHomePageNewDocument-WPQ4-img" src="/_layouts/15/images/spcommon.png?rev=23"></span><span>Solliciteer</span></a><br/>

I changed it to this:

<a class="vacatureHyperlink" title="Solliciteer" href="http://www.google.com" target="vacatureIframe"><span class="sprite"><img class="ms-list-addnew-img16" id="idHomePageNewDocument-WPQ4-img" src="/_layouts/15/images/spcommon.png?rev=23"></span><span>Solliciteer</span></a><br/>

And I also try this:

<a class="vacatureHyperlink" title="Solliciteer" href="http://www.google.com" target="vacatureIframe"><span class="ms-list-addnew-imgSpan16"><img class="sprite" id="idHomePageNewDocument-WPQ4-img" src="/_layouts/15/images/spcommon.png?rev=23"></span><span>Solliciteer</span></a><br/>

Why do I not see the envelope icon?

  • possible duplicate of CSS Sprite table – Tiago Duarte Aug 14 '14 at 17:09
  • Thank you Tiago! That is exactly where I am looking for. – Ola Aug 15 '14 at 7:40
  • I updated my question after trying Sprite Cow. It doesnt worked yet. – Ola Aug 15 '14 at 9:24
  • 1
    You should use divs or other block element, and add the style to that element, not to an image element. This is off topic though, since it in essence is a pure CSS question with no real SP connection (how to use sprites) – Robert Lindgren Aug 15 '14 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.