I want to use the following icons in my ionic 5 react App with their title or label at their bottom and also align them horizontally rather than vertically like a list. I tried to ion-icon, I couldn’t find colored icons and also I tried using ion-list and ion-item couldn’t get them to align horizontally and also couldn’t align the label at the bottom of the icons. So if there is anyone that can help me on what component to use to achieve the following result as shown in the attached image, it would be much appreciated, Thank you
@samdawit Can you show the code of this page?
Use ion-col align-items-center then put each icon inside ion-row .
If u have 6 icons give each row size=“2”
If u have 4 icons give each row size=“3”
If u have 3 icons give each row size=“4”
Total 12 . To make the ion-col responsive .
Check the ionic component documentation for more information.
This is my code and also i am attaching the result i got, but it’s too long and it’s hard to control the alignment of the title to the center of the image or icon… please if there is a better way of handling this to get my previous image result, I would really appreciate it. And also how do i make the Ion-img clickable
<IonCol size-md='6' offset-md='3'> <IonRow class='ion-margin'> <IonCol> <IonThumbnail> <IonImg alt='card' src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/bank.png?alt=media&token=8916f9e6-3323-45f7-b8f1-92689344d23e' /> <IonText>Card</IonText> </IonThumbnail> </IonCol> <IonCol class='align-items-center'> <IonThumbnail> <IonImg alt='card' src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/money.png?alt=media&token=01708c8b-1287-42c9-b8c2-61898a639fdc' /> <IonText>Cash</IonText> </IonThumbnail> </IonCol> <IonCol class='align-items-center'> <IonThumbnail> <IonImg alt='barcode' src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/qr-code.png?alt=media&token=0a9cbde2-771a-431d-82e7-5c85c18cc1f6' /> <IonText>Barcode</IonText> </IonThumbnail> </IonCol> </IonRow> </IonCol> </IonRow>