Topic: Icons in buttons show only arbitrarily
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
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 1 year 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 1 year 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 1 year 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 1 year ago
We use version 6. You can use the newest available minor version from version 6.
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 1 year ago
Then it may be a problem with the version of Font Awesome. In the example, version 6.1.1 is used.
Please add a link to the tutorial you are referring to and preapere a snippet that demonstrates the problem you have.
gwilhelms priority commented 1 year ago
Here's the link: https://mdbootstrap.com/snippets/standard/mdbootstrap/2632071?view=side
gwilhelms priority commented 1 year ago
Here's the snippet: https://mdbootstrap.com/snippets/standard/gwilhelms/5791482
Kamila Pieńkowska staff commented 1 year ago
You need to Publish your snippet for me to have access to it.
gwilhelms priority commented 1 year 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 1 year 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 1 year ago
Many thanks for your helpful comments and suggestions. Everything now works as expected!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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