Can i add more icons beyond the existing icon selections?

Support
#1

Can i add more icons beyond the existing icon selections?

I realize i could add icons as images but i was if i could add custom icons in Elements that use Icons like the ‘Card’ or ‘Call-Out’ elements?

Thanks!

#2

Yup! They are from Font Awesome. You can see all the icons on the demo shortcode page at: http://demo.theme.co/integrity-1/shortcodes/icons/ or the Font Awesome list here: http://fontawesome.io/cheatsheet/

#3

@afungusboy am i limited to Font Awesome icons? How do i add those icons in the elements that have the icon option? Are they already there or do i have to add them as shortcodes?

Thanks!

#4

Yes. Just replace the icon name, i.e:
button_icon=“thumbs-up”
to
button_icon=“thumbs-down”
or you can add it to any text using the icon shortcode:
[x_icon type=“thumbs-down”]
or you can use :before or :after and add using code with css.

#5

Hi @JDRDigital

Yes, you’re only limited to what icons are available from FontAwesome (http://fontawesome.io/icons/ ).

If you mean you want to add your custom icon to the FontAwesome, you need to make a request from the FontAwesome Guys (http://fontawesome.io/community/#requesting-new-icons)

Yes all the icons that you’re seeing here (http://fontawesome.io/icons/) are already on XTheme/Cornerstone, just look for it on the icon picker (https://prnt.sc/fu5yll) or use the search function so you can easily find it.

Cheers!

#6

@friech so there’s no way to take advantage of the amazing elements you have and someone code in a custom icon of my own instead of having to choose the from select @ font awesome?

There’s no way around this with a shortcode or just coding?

Thanks!

#7

Hi There,

You can actually use the Cornerstone’s Image element to add your custom icon on the page. Or use use the HTML <img> tag, which you can place on a RAW content element.

e.g.
<img src="CUSTOM ICON URL HERE" />

Cheers!

#8

@friech but does this allow me to place an icon within the elements that include icons? Because you have great elements that are beautifully designed but what if i want to insert my company logo or my own icons?

No way to code this in?

#9

Hi,

We can target the element and change the icons using css.

Can you provide us the url of the page and element you are trying to change.

Thanks

#10

@paul.r The page isn’t up yet. Is it suppose to do it in the custom css/js section of the pro editor. Could you send me an example code on how to change it?

Thanks for your patience Paul!

#11

Hi there,

Let me show you an example of changing the icon of a button:

  1. Go to the Wordpress Dashboard > Media and upload your desired icon. Click on the image and copy the URL of the image:

  1. Add a new page or edit an existing page using Cornerstone

  2. Add the Button shortcode and set it to have an icon:

  1. Click on the CSS icon of the Cornerstone on that page from the left side of the screen and add the CSS code below:
.x-btn .x-icon:before {
	content: '';
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	background: url('COPIED URL') center center no-repeat; 
	background-size: contain;
	vertical-align: middle;
}

Change the COPIED URL section with the copied URL of step 1.

  1. The given CSS replaces the Font Awesome Icon with your desired image:

You can use the same method for other elements that have icons but you will need to change the CSS code depending on which Element you will use.

Thank you.

#12

Thanks a ton @christopher.amirian !

#13

@christopher.amirian

How can i find the codes to target icons for different elements like “cards element”. Also how can i change the icons if for example i multiple of the same “element” on the page? Can i still have different icons for the multiples of the same element?

Thanks !

#14

Hi again,

Simplest way would be to give that element a class using a class field in Cornerstone for example my-card-element and then you can use the above code with the class name like this:

.my-card-element .x-btn .x-icon:before {
	content: '';
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	background: url('COPIED URL') center center no-repeat; 
	background-size: contain;
	vertical-align: middle;
}

This should work for all elements and for multiple elements as well if you give them a class.

Hope this helps!

#15

@Nabeel

So i add a unique class identifier and then insert the code in the custom css section? I’m not doing it right, can you tell me what i did wrong?


#16

Hi again,

You can use this CSS instead with your unique class:

.my-card-element .x-btn .x-icon:before, .my-card-element .x-btn [class*="x-icon"]:before {
	content: '' !important;
	width: 30px !important;
	height: 30px !important;
	display: inline-block !important;
	overflow: hidden !important;
	background: url('COPIED URL') center center no-repeat !important; 
	background-size: contain !important;
	vertical-align: middle !important;
}

Let us know how this goes!

#17

@Nabeel it doesn’t seem to be working. Maybe i didn’t implement it correctly?


#18

Hi there,

The steps that you took for this is completely right, we need just to tweak the CSS code a little bit. Please replace the previously suggested code with this one:

.my-card-element [data-x-icon]:before {
	content: '';
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	background: url('COPIED URL') center center no-repeat; 
	background-size: contain;
	vertical-align: middle;
}

That should do it.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.