Font not show and wrong size
hi, I'm using metronic 8.1.7 for angular.
I try some icon like this
1. <i class="ki ki-solid-plus icon-10x"></i><br>
2. <i class="flaticon2-hourglass-1 icon-10x"></i><br>
3. <span class="svg-icon svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M6,2 L18,2 C19.6568542,2 21,3.34314575 21,5 L21,19 C21,20.6568542 19.6568542,22 18,22 L6,22 C4.34314575,22 3,20.6568542 3,19 L3,5 C3,3.34314575 4.34314575,2 6,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" fill="#000000"/>
</g>
</svg>
</span> <br>
4. <i class="fa fa-fill-drip"></i><br>
5. <i class="fa fa-fill-drip text-dark icon-10x"></i><br>
6. <i class="socicon-android icon-10x"></i><br>but No. 1 & 2 not show anything, and the other show with small icon even using icon-10x
Replies (5)
1. <i class="ki ki-solid-plus icon-10x"></i><br>
2. <i class="flaticon2-hourglass-1 icon-10x"></i><br>
3. <span class="svg-icon svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M6,2 L18,2 C19.6568542,2 21,3.34314575 21,5 L21,19 C21,20.6568542 19.6568542,22 18,22 L6,22 C4.34314575,22 3,20.6568542 3,19 L3,5 C3,3.34314575 4.34314575,2 6,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" fill="#000000"/>
</g>
</svg>
</span> <br>
4. <i class="fa fa-fill-drip"></i><br>
5. <i class="fa fa-fill-drip text-dark icon-10x"></i><br>
6. <i class="socicon-android icon-10x"></i><br>And I got some common style like mr-2 can't used in this template, but i can mx-2, is there any miss at scss?
Hi Saiful,
Please use the fs-* class to change the icon size.
https://getbootstrap.com/docs/5.0/utilities/text/#font-size
You can refer to the bootstrap website.
Thanks
yes I can use font size, how about icon with class ki and flaticon2? still can't use that icon.
Hi Saiful,
Only these icons we have included in the package for Metronic v8.
Duotune
Bootstrap Icons
Custom Icons
Font Awesome
Line Awesome
Please check the docs here:
https://preview.keenthemes.com/html/metronic/docs/icons/duotune
For flaticon and ki, we do have it in the previous version and we have already removed it for the latest version:
https://preview.keenthemes.com/metronic/demo1/features/icons/flaticon.html
https://preview.keenthemes.com/metronic/demo1/features/icons/custom-icons.html
Thanks
