How to enable Elegant fonts using CSS class and HTML?

HTML & CSS
1

Why is not working to show a testing icon inside HTML and separate CSS?
Need help what to change to work and the code is the following:

<!DOCTYPE HTML>

<html>

<head>
<title>Elegant icons</title>
<link rel="stylesheet" id="elegant_icons-css" href="https://cdn.jsdelivr.net/npm/@icon/elegant-icons@0.0.1-alpha.4/elegant-icons.min.css" type="text/css" media="1" />
<link rel="stylesheet" type="text/css" href="/css/mywebfonts1.css">
<style type="text/css">
<!--
.mywrap.el-icon-resp-type1::before {
 font-family: 'ElegantIcons';
}
.mywrap.el-icon-resp-type1::before {
 font-size: 2rem;
 margin-right: 25px;
}
-->
</style>
</head>



<body>
<div class="mywrap"></div>
</body>

</html>

mywebfonts1.css:

/*ElegantIcons*/
@font-face {
 font-family: 'ElegantIcons';
}
[class^="el-icon-resp-"], [class*=" el-icon-resp-"] {
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
.el-icon-resp-type1:before {
 content: "\e017";
}
1 Like
2

You don’t have that class in your html only a mywrap class? Should it be this:

<div class="el-icon-resp-type1 mywrap"> </div>

It looks the media=“1” attribute is wrong on the link also so remove it.

The font family seems to be called this:


  font-family: "elegant-icons";

Not:


  font-family: "ElegantIcons";

This seems to display something:

Is that what its supposed to do?

I know nothing about that font library.

3

Thank you for the message!
It is source: https://www.elegantthemes.com/blog/resources/elegant-icon-font

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.