• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Insert icon via CSS


Well-known member
I want to put this chat icon on the right side of the 'start a conversation" in line with the wording. Can i do this via CSS as apposed to HTML? if so, how? I cannot get it to appear inline with HTML.

<xen:if is="{$canStartConversation}">
                                <dl><dd><a href="{xen:link 'conversations/add', '', 'to={$user.username}'}">{xen:phrase start_conversation}</a></dd></dl>
                            </xen:if>&nbsp;<IMG SRC="http://www.mysite.com/community/styles/images/images/chat1.png" ALT="Convo" WIDTH=20 HEIGHT=20>
Screen Shot 2013-10-13 at 9.56.20 AM.png


Well-known member
Add a custom class to it, like so (you can make it whatever you want):
<a class="convo-icon" href="{xen:link 'conversations/add', '', 'to={$user.username}'}">{xen:phrase start_conversation}</a>
Then use a pseudo class:
.convo-icon:after { content: url(pathtoyour/image.png); }
And you can adjust it from there. Should work, haven't tested it.