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
Please add a link to the tutorial you are referring to and preapere a snippet that demonstrates the problem you have.
gwilhelms pro premium priority commented 11 months ago
Here's the link: https://mdbootstrap.com/snippets/standard/mdbootstrap/2632071?view=side
gwilhelms pro premium 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 pro premium priority commented 10 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 10 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 pro premium priority commented 10 months ago
Many thanks for your helpful comments and suggestions. Everything now works as expected!
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.
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 10 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 pro premium priority commented 10 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 pro premium priority commented 10 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 10 months ago
We use version 6. You can use the newest available minor version from version 6.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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