1. 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

Discussion in 'Styling and Customization Questions' started by tommydamic68, Oct 13, 2013.

  1. tommydamic68

    tommydamic68 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.

    Code:
    <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
     
  2. mistypants

    mistypants Well-Known Member

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

    tommydamic68 Well-Known Member

    No - did not work. Conversation link didn't even appear . Any other thoughts?
     
  4. EQnoble

    EQnoble Well-Known Member

    If you gimme a link I will take a look.
     
  5. tommydamic68

    tommydamic68 Well-Known Member

    Sorry @mistypants - it did work, thank you! just had to add:

    Code:
    margin-left: 5px;
    Screen Shot 2013-10-13 at 8.21.25 PM.png
     
    mistypants likes this.

Share This Page