Adding an icon at the end of a text link (twenty fifteen)

I am trying to create links in the body of a page that are text with a small icon at the end indicating the file type that will be downloaded (.xls, .pdf, .doc etc) if the link is clicked.

Here is the CSS code I have created:

.xls:after {
content: “”;
display: inline;
background: url(“http://djmassoc.com/wp-content/uploads/2015/10/xlsicon.png”) no-repeat;
width: 19px;
height: 18px;
margin: 0 6px 0 0;
}

and here is the HTML:

<p class=”xls”>DJMA UE Cost-Justification Tool</p>

The end result is almost what I want, but not quite: the little icon appears left justified right below the text, not immediately at the end of the text, which is what I want (I have not yet turned the whole thing into a link, just trying to get icon to display right after text).

If I put in a float: right; line in the css, the icon appears to the far right of the page, also not what I want.

Is there something I can add to the CSS code to get the effect I want?

Or is there some other way altogether to get the effect I want?

Thanks much!