Navigation
Archive / Contact Form 7 and Font Awesome
This is archived content. Visit our new forum.
1 2
  • Author
    Posts
  • August 21, 2015 at 12:00 pm #365428

    mlsuffo
    Participant

    Hi

    I am trying to add fa-user to the placeholder text of a contact 7 form – I have

    <div class="column-half"><span class="[icon type=x-user]"></span>[text* text-699 class:form-control placeholder "First Name *"]</div>

    .. but the icon is not shpoowing – have I added the correct code for the icon. The form works and looks fine other than the icon not showing?

    Many thanks

    Martin

    August 21, 2015 at 10:20 pm #365722

    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in!

    Based on the code that you have provided, you cannot add a shortcode in the class attribute. Contact form 7 doesn’t accepts any shortcodes other than Contact form 7 shortcodes. Please use this instead:
    <div class="column-half"><i class="x-icon x-icon-user" data-x-icon=""></i> [text* text-699 class:form-control placeholder "First Name *"]</div>

    Please copy the raw code here: http://pastebin.com/uTRby8Fe

    Please let us know how it goes.

    August 22, 2015 at 7:48 am #366015

    mlsuffo
    Participant
    This reply has been marked as private.
    August 22, 2015 at 7:57 am #366021

    Christopher
    Moderator

    Hi there,

    Is http://itsyourweb.co.uk/bduk/ your site URL?
    I can’t locate where you added contact form, please give us exact URL.

    Thanks.

    August 22, 2015 at 7:58 am #366026

    mlsuffo
    Participant
    This reply has been marked as private.
    August 22, 2015 at 8:01 am #366027

    mlsuffo
    Participant
    This reply has been marked as private.
    August 22, 2015 at 8:30 am #366053

    Thai
    Moderator

    Hi There,

    Try adding following CSS under Appearance > Customize > Custom > CSS:

    #responsive-form .x-icon {
    position: absolute;
    margin-left: 12px;
}

    Hope it helps.

    August 22, 2015 at 9:01 am #366072

    mlsuffo
    Participant
    This reply has been marked as private.
    August 22, 2015 at 9:16 am #366083

    Thai
    Moderator

    Hi There,

    You can find the HTML icon code from this page:

    http://theme.co/x/demo/renew/1/shortcodes/icons/

    Regards!

    August 22, 2015 at 9:34 am #366087

    mlsuffo
    Participant
    This reply has been marked as private.
    August 22, 2015 at 9:46 am #366097

    Thai
    Moderator

    Could I have pasted the symbol in – I thought I needed the unicode? I got the unicode from the fa site.

    Yes, something like this: <i class="x-icon-twitter-square" data-x-icon="&#x f081;"></i> (&#x f081 without whitespace, f081 is the fontawesome unicode).

    Hope it helps.

    September 1, 2015 at 6:16 am #375469

    mlsuffo
    Participant

    Hi

    I am trying a similar thing with another form but I have increased the font size to make the form boxes bigger. I am struggling to vertically align the icons though – could you help?

    http://prntscr.com/8bbq8p

    Many thanks

    Martin

    September 1, 2015 at 7:18 am #375527

    Christopher
    Moderator

    Hi there,

    Please provide us with URL of page where you added form. The contact page form displays fine on my end.

    Thanks.

    September 1, 2015 at 9:06 am #375623

    mlsuffo
    Participant
    This reply has been marked as private.
    September 1, 2015 at 11:07 am #375678

    mlsuffo
    Participant

    Hi

    From the original code above I added – 

    #responsive-form .x-icon {
    position: absolute;
  	bottom:24px;
      
}

    That seems to have done the trick – is that right?

    Cheers

    Martin

  • Author
    Posts
1 2