Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.
Hire Us

Okay
  Public Ticket #1072173
Adding Icons through HTML or manually (i.e. in Contact Form 7)
Closed

Comments

  •  2
    JargonGR started the conversation
    February 22, 2017 at 9:44pm

    Hi,

    I am trying to locate the icon classes used throughout the them but have no luck.

    For example I want to add icons in a contact form (CF7) and can locate the icon classes since your use a pretty fancy way of displaying them (half-1 , half-2). 

    Yet, I would also like to know so I can add icons anywhere else I need with HTML. 

    Any help swiftly would be appreciated since we have a client meeting tomorrow and this just came up.

  •  433
    Sergio replied
    February 23, 2017 at 6:36pm

    Hi, not quite sure what do you mean. Can you pls provide more details (screenshot)? 

    I'll help you.

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  •  2
    JargonGR replied
    February 23, 2017 at 8:25pm

    Ok here is an example

    The item below is a Contact Form 7 input field in the syntax form used at the back-end while creating the form.

    <div> <p><span class="vc_icon_element-icon fa fa-user"></span> [text* your-name placeholder "Name"] </p> </div>

    In this example you can notice a span element with a class that prints an Font Awesome Icon at the front end. The class is the one used by Visual Composer. What is the class used by The Gem so I can use it in html elements such as widget text fields?

    The problem with the solution above is the the icons are not printed unless you already have an icon produced by VC on the same page so that the VC Font Awesome library is already loaded and available. 

    Nevertheless, how do you add icons in a contact form if not the way I mention above?


    Thanks a lot.

  •  433
    Sergio replied
    February 24, 2017 at 4:30pm

    Hi,

    example, we have a page http://codex-themes.com/thegem/pages/contact-us/contact-us-01/

    code field "name" (screen 100):

    <p class="cf-style2-text">
    <span class="wpcf7-form-control-wrap name">
    <input type="text" name="name"
           class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"
           placeholder="Name*"/>
    </span>
</p>

    css code field icon (icon is added in pseudo :after):

    .wpcf7-form .name:after {
    content: '\e63b';
    color: #b6c6c9;
    position: absolute;
    font-family: thegem-icons;
    right: 12px;
    top: 12px;
    font-size: 24px;
}

    icons in the thegem-icons pack, check http://codex-themes.com/thegem/wp-content/themes/thegem/fonts/icons-fonts-info.html

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  •  2
    JargonGR replied
    March 3, 2017 at 12:03pm

    Sergio thanks for your assistance and excuse me for the delayed reply. 

    Can you please clarify something?

    The icon codes found in your link work but other codes taken from within Visual Composer (the selection screens for icons in elements using them) do not work - the display a placeholder instead.

    Are we limited to those icons found in your link? How can I use the other icons (i.e. Material Design, Font Awesome)


    Thanks

  •  433
    Sergio replied
    March 3, 2017 at 4:19pm

    For increasing site loading speed in our theme icons packs connects on the page only with shortcodes. 

    So if you wish to use icons without shortcodes, for example in the contact for you need to connect this icons font on the page.

    You need in the functions.php on the child theme pls. add following:

    Elegant icons:

    wp_register_style('icons-elegant', get_template_directory_uri() . '/css/icons-elegant.css');
wp_enqueue_style('icons-elegant'

     Material icons:

    wp_enqueue_style('icons-material');
wp_register_style(''icons-material', get_template_directory_uri() . '/css/'icons-material.css');

    Fontawesome icons:

    wp_register_style('icons-fontawesome', get_template_directory_uri() . '/css/icons-fontawesome.css');
wp_enqueue_style('icons-fontawesome');

    Userpack icons

    wp_register_style('icons-userpack', get_stylesheet_directory_uri() . '/css/icons-userpack.css');
wp_enqueue_style('icons-userpack');

    Css font-families:

    /*default icons*/
.icon {
    font-family: 'thegem-icons';
}
/*socials icons*/
.icon  {
    font-family: 'thegem-socials'
}
/*socials user icons*/
.icon  {
    font-family: 'thegem-user-icons';
}
/*ElegantIcons user icons*/
.icon {
    font-family: 'ElegantIcons';
}
/*FontAwesome  icons*/
.icon {
    font-family: 'FontAwesome';
}
/*Material icons*/
.icon {
    font-family: 'MaterialDesignIcons';
}

    Here you can see default and social icons packs:

    http://codex-themes.com/thegem/wp-content/themes/thegem/fonts/icons-fonts-info.html

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.