How to avoid line breaks after ":before" in CSS

On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax.

a.some-link:before {
  font-family: icons;
  display: inline-block;
  padding-right: 0.3em;
  content: 'x';
}

However, when this link is at the beginning of a line, it's sometimes separated from its icon:

I tried adding white-space: nowrap to the CSS rule above but that didn't help.

How do I keep the icon and the text together? (CSS 3 is okay)

Note: I don't want to format the whole link with white-space: nowrap.

Simply removing the display:inline-block; seems to fix this issue:

a.some-link:before {
    font-family: icons;
    padding-right: 0.3em;
    content: 'x';
}

JSFiddle.

Unfortunately, you need "display: inline-block" to show SVG. Simple solution is to put "display: inline-block" on the "a". This will cause your SVG to render properly AND it will keep your a:before and the a together on one line.