Light
Dark
System
Ask  Question

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
user
Saiful Haqqi 3 months ago
Angular Metronic Icons
5 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
Saiful Haqqi 3 months ago
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>

user
Saiful Haqqi 3 months ago
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?
F
Faizal Author3 months ago
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
user
Saiful Haqqi 3 months ago
yes I can use font size, how about icon with class ki and flaticon2? still can't use that icon.
F
Faizal Author3 months ago
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
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle