Issue
I'm trying to place an icon inside a button to select some files. Everything works fine except that that the size of the icon is way too small. The button in which the icon is placed has the right dimensions. This is what it looks like:
How do I make my icon bigger?
Relevant html
<ion-grid>
<ion-row>
<ion-col size="2">
<ion-button
fill="clear"
(click)="popFileChooser()"
expand="full"
class="btnUpload"
>
<input
(change)="onImageSelected($event)"
type="file"
accept="image/*"
multiple
#uploader
hidden
/>
<ion-icon
class="btnIcon"
slot="icon-only"
color="secondary"
name="add-circle"
></ion-icon>
</ion-button>
</ion-col>
<ion-col size="10">
<ion-row>
<ion-col size="auto">
<div class="imgWrap" *ngFor="let imgUrl of selectedImages">
<img class="imageThumbnail" [src]="imgUrl" />
<ion-icon
class="icon"
color="danger"
name="close-circle"
></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
And css
.imgWrap {
position: relative;
display: inline-block;
}
.imgWrap > img {
width: 50px;
height: 50px;
padding: 5px;
}
.icon {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
}
.btnIcon {
font-size: 100px;
width: 100%;
}
Solution
It might be that your CSS is overwritten by ionic default CSS.
So, use !important
to add priority to your CSS , example:
.btnIcon {
font-size: 100px !important;
width: 100% !important;
}
Answered By - Ani
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.