BlueOwlCreative » Topic: Custom Icons https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/feed/ Fri, 28 Aug 2026 01:44:26 +0000 http://bbpress.org/?v=2.5.3-5249 en-US https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28296 <![CDATA[Custom Icons]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28296 Thu, 28 Apr 2016 18:44:16 +0000 Propecta Hi I found a thread here about adding custom icons:

http://blueowlcreative.com/support_wp/forums/topic/svg-icon-upload/

I added my own icons to the path fortuna/stylesheets/fonts and I added the css to the icons.css in the same location. I see that you mention setting up a class like this one: \fortuna\includes\shortcodes\vc\boc_iconpicker.php
How do I know what name to use for the icon? would this work with the type of set up that I am doing?
We are launching this site very soon so your prompt response is highly appreciated!!
Thanks

]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28309 <![CDATA[Reply To: Custom Icons]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28309 Tue, 03 May 2016 08:24:23 +0000 BlueOwl Hi again,

Indeed that’s the way to go.
The names of the icons… once you export your fonts in icomoon you have class names that correspond for each icon, this is the class name that is used in the CSS file as well and in the frontend. These are the classes you need to add as an array in your

\fortuna\includes\shortcodes\vc\boc_iconpicker.php

]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28328 <![CDATA[Reply To: Custom Icons]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28328 Tue, 03 May 2016 16:55:08 +0000 Propecta Thank you for your answer. I added the arrays properly. However I am having an issue with css apparently. If I add this class:

———————————————————-

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: ‘saddle_creek’ !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
———————————————————-

I am able to see the icons I uploaded on icon picker but all of the other icons disappear:

https://drive.google.com/file/d/0B2DHr_SjIT5-Sm5wVDJwcUVMU3M/view?usp=sharing

But if I remove that class, I am able to see all of the icons again except the ones I uploaded:

https://drive.google.com/file/d/0B2DHr_SjIT5-NC01ZnVjb0g1TTg/view?usp=sharing

Please help!!!

]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28333 <![CDATA[Reply To: Custom Icons]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28333 Wed, 04 May 2016 06:59:38 +0000 BlueOwl What this declaration does is it looks for any classes that start with “icon-” and applies the style to them. Obviously this overwrites all existing icons too, so it’s not an elegant solution. Instead you can use a different nomenclature for your custom icons…
How about “custom_icons-” ? :)

]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28349 <![CDATA[Reply To: Custom Icons]]> https://blueowlcreative.com/support_wp/forums/topic/custom-icons-2/#post-28349 Wed, 04 May 2016 19:11:18 +0000 Propecta This is resolved now. Thanks!!!

]]>