BlueOwlCreative » Topic: Creating Custom Icons

Creating Custom Icons

emhillsdesigns — Tue, 29 Mar 2016 05:47:57 +0000

I know you can select an icon from the many icon libraries in the WordPress admin area, however is there a way to add my own custom icons into this library, and use in the Top Icon Box area?

Reply To: Creating Custom Icons

BlueOwl — Tue, 29 Mar 2016 08:01:48 +0000

Hi there,

Not unless you include your own icon font, which takes some coding skills.
You could manually include your icon font in your header.php in your child theme, then override a regular icon with CSS as well, it would be easier.

Reply To: Creating Custom Icons

Propecta — Thu, 28 Apr 2016 18:07:32 +0000

I tried to include some custom icons from icomoon, added the files here:
fortuna/stylesheets/fonts
And included the css in the fonts stylesheet.
I am not seeing my icons in the library. I am a programmer so please explain the way I can do this in your theme. This is urgent. Thanks!

Reply To: Creating Custom Icons

BlueOwl — Tue, 03 May 2016 08:22:45 +0000

Hi there,

Sorry for the late reply but … holidays!
So, in order to add those too you need to add them to the array of icons declared as internal for VC in this file:

includes\shortcodes\vc\boc_iconpicker.php

The actual CSS for the icons is in this file so make sure you have a similar one included.

stylesheets\icons.css

Make sure you figure out a way to do this in your Child theme for obvious reasons.

Reply To: Creating Custom Icons

hba — Tue, 05 Jul 2016 11:21:11 +0000

Why don’t you upload a video in creating Custom icons? Because many users have different needs and will have to use custom icons as per their and client requirements.

Reply To: Creating Custom Icons

BlueOwl — Tue, 05 Jul 2016 11:52:08 +0000

Hi again,

If you lack the programming skills to add your fonts to dynamically load as described above you can simply include your fonts into your Child theme (http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).

for example:

@font-face {
    font-family: 'my-icons';
    src:    url('fonts/my-icons.eot');
    src:    url('fonts/my-icons.eot#iefix') format('embedded-opentype'),
        url('fonts/my-icons.ttf') format('truetype'),
        url('fonts/my-icons.woff') format('woff'),
        url('fonts/my-icons.svg?#my-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then override specific icons using simply CSS classes!
For example you include your own font-family named “my-icons”.

Then you would have an icon in the HTML say:

You can style that particular icon to use your new icon font and a specific icon (content) from it like so:

.icon.icon-anchor3 {
font-family: 'my-icons';
content: "\e904";
}