[Resolved] Glyphicon assistance

[Author]

Posts

[jonS-2]

I am trying to: add glyphicons to buttons in a cred form (id: 1237)

I believe I followed the tutorial correctly, but they don't seem to be showing up.

Can you please check and see if I'm implementing the code correctly.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jon

I looked at form 1237 and I can't see any sign of anything you have done to add the icons to the buttons.

Can you tell me what you have done and which tutorial you were following.

As you cannot modify the markup CRED generates for the fields and buttons, I would expect you to need to add some custom JS that modifies the form markup once it has been generated, but I'm not seeing any of that—nor anything else.

[jonS-2]

Sorry NIgel,

It's in the view (new-manager-team-list-view) which is above the form that has the code to add the glyphicons to the buttons.

<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>[cred_link_form form='1415' form_name='New Edit Team Photo Member' text='Edit' target='_self']</button>

The tutorial is found on the "Learn How to Use Bootstrap in layouts" link when you click on the bootstrap button element.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Jon

Thanks for the clarification, it helped me track down where I was expecting to see the icons used and appear.

On a page on the front-end where I would expect to see them (e.g. hidden link) they are not, and they are not because your theme is not loading Bootstrap and so the glyphicons are unavailable.

See the screenshot from the browser console which shows the stylesheets loaded on the page—Bootstrap is notably absent.

You will have to enqueue it yourself (read about enqueuing stylesheets in the official WordPress theme developers handbook: https://developer.wordpress.org/themes/basics/including-css-javascript/).

Or if you just need a few icons, you can take advantage of the built-in dashicons in WordPress, which you can read about here: https://developer.wordpress.org/resource/dashicons/

I added a sample line of text with a dashicon to your view so you can see what is involved.