Topic: Icons in buttons show only arbitrarily

gwilhelms priority asked 11 months ago


Expected behavior I was borrowing the icon enhanced buttons from the Trello tutorial. I created some buttons with different icons. All buttons should be decorated by an icon.

Actual behavior Some buttons show an icon, some do not. In the example below only the "Delete" button is displayed with an icon. The code snippet is used with the code which came with the Trello tutorial including the modified stylesheet.

Resources (screenshots, code snippets etc.) Edit

Delete

Add


gwilhelms priority answered 11 months ago


Sorry, needed some spare time to figure that out . . . OK, seems the issue is caused by the way MDB is hosted. When I use the snippet in your environment the buttons work as expected. As soon as I use MDB on my server the code has the described disfunctionality.

To be completely sure I downloaded the new MDB version MDB5-STANDARD-UI-KIT-Pro-Advanced-7.0.0.zip. I unzipped everything and copied the code to my Ubuntu machine powered by Apache 2.4.41. Then I downloaded the snippet which works in your environment and copied it to my server.

On my server the List, Edit, Merge and Add buttons don't show the icons whereas Board and Delete show the icon.

See here: https://db.zww.uni-augsburg.de/Trello/snippet.html


Kamila Pieńkowska staff commented 11 months ago

As I've said before you need to use Font Awesome version 6.1.1 or newer.

In your project, you use version 5.11.2


gwilhelms priority commented 11 months ago

I downloaded the code from the Snippet engine at https://mdbootstrap.com/snippets/standard/gwilhelms/5791482 using the Download button. Maybe you should update the snippet machine? That's the code distributed:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

Regards Gerhard


gwilhelms priority commented 11 months ago

BTW, the snippet works on my machine when changing Font Awesome to version 6.1.1. How can I find out which version of Font Awesome is licensed for use with MDB?


Kamila Pieńkowska staff commented 11 months ago

We use version 6. You can use the newest available minor version from version 6.


gwilhelms priority answered 11 months ago


Very strange: the snippet works as expected. If you copy the additional buttons right into the complete Trello code they show the described behavior. Some do show (Delete), some don't (List, Merge, Edit).


Kamila Pieńkowska staff commented 11 months ago

Then it may be a problem with the version of Font Awesome. In the example, version 6.1.1 is used.


Kamila Pieńkowska staff answered 11 months ago


Please add a link to the tutorial you are referring to and preapere a snippet that demonstrates the problem you have.


gwilhelms priority commented 11 months ago

Here's the link: https://mdbootstrap.com/snippets/standard/mdbootstrap/2632071?view=side


gwilhelms priority commented 11 months ago

Here's the snippet: https://mdbootstrap.com/snippets/standard/gwilhelms/5791482


Kamila Pieńkowska staff commented 11 months ago

You need to Publish your snippet for me to have access to it.


gwilhelms priority commented 11 months ago

Published. Sorry, I'm just beginning to use MDB. I'm not aware yet of the functioning of all systems.


Kamila Pieńkowska staff commented 11 months ago

As you can see in the snippet you've prepared icons are shown in the buttons in our test environment.

So must have some problem with icon import. Please tell me how you import icons in your project.


gwilhelms priority commented 11 months ago

Many thanks for your helpful comments and suggestions. Everything now works as expected!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.2
  • Device: any
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No