Object placement appears differently after publishing
<p>I have created a website, debugged it in Visual Studio by using the "view in browser" feature, and decided it was ready to be deployed onto our test server. When I debug the program from Visual Studio the contact page has elements that look like this:</p>

<p><a href="https://i.stack.imgur.com/KHH4i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KHH4i.png" alt="enter image description here"></a></p>

<p>When I go to the address of the website on the server, it displays like this:</p>

<p><a href="https://i.stack.imgur.com/2gGPf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2gGPf.png" alt="enter image description here"></a></p>

<p>The star is a glyph-icon from Bootstrap tools that were already on website's solution when I opened it (someone else made the solution). The code for this section of the site is below:</p>

<p><a href="https://i.stack.imgur.com/9qqMV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9qqMV.png" alt="enter image description here"></a></p>

<p>I tried to find information about why this isn't displaying correctly, but was unable to. Without knowing anything about the server, what would you recommend me checking or changing to resolve this issue?</p>

<p>Edit: I think it is worth mentioning I have tried both Chrome and IE and get the same results on each of them. Trying to run the page in compatibility mode hides the glyph-icon star all together.</p>