HTML (HTML5) Problema ao usar Icons Fonts do IcoMoon!

Mizrain Phelipe Sá · 31 de outubro de 2019

Pessoal estou tentando usar as icons fonts do site IcoMoon, eu escolhi os icons, baixei e linquei na minha página, porém quando eu abro o arquivo web o icon não aparece e sim o seu character, alguém sabe como resolvo isso?

Meu código HTML:

<!DOCTYPE html>
<!-- DOCTYPE informa ao agente de usuario a versão do html que deve ser renderizada -->
<html lang="pt-br">

<head>
    <title>responsivo</title>
<!-- essas são as METATAGS elas só ficam dentro da TAG <head> e n são visiveis aos usuários -->
    <meta charset="utf-8">
    <meta name="author" content="Felipe">  <!-- tag para identificar o autor da página -->
    <meta name="description" content="um exemplo apenas">  <!-- tag para dar uma descrição a página que pode aparecer nas descrições do site qd exibidas no google para o usuário -->
    <meta name="keywords" content="html5, tecnologia">    <!-- tag para colocar PALAVRAS-CHAVES na página --> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700">

    <link rel="stylesheet" href="iconmoon/style.css"> <!-- aqui estou linkando o arquivo css dos iconsfonts que eu baixei na net para usálos na minha página -->

    <link rel="stylesheet" href="css/normalize.css"> <!-- NORMALIZE baixe na NET e use para deixar a página mais aceita em todos os browsers -->

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

<header class="top-header">
    
    <img src="images/logo_mob.svg" alt="Logotipo" class="top-header-logo">

    <nav class="top-nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Serviços</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </nav>

</header>

<section class="top-content">
    
    <h1 class="top-content-title">A exciting new venture over the range</h1>

    <h2 class="top-content-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipisicing elit.</h2>

    <a href="#" class="button">Get Started</a>

</section>

<section>
    
    <article>
        
        <span class="icon-stopwatch"></span>
        <h3>Designer Guff</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

    <article>
        
        <h3>Detaild Stats</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

    <article>
        
        <h3>Dashboard</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

    <article>
        
        <h3>Development</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

</section>

<section>
    
    <article>
        
        <h3>Designg Heading</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

    <article>
        
        <h3>Designg Trends</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

    </article>

    <article>
        
        <h3>Designg Users</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

        <a href="#">Get Started</a>

    </article>

    <article>
        
        <h3>Designg Goals</h3>

        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

        <a href="#">Buy Now</a>

    </article>

</section>

<footer>
    
    <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Google Plus</a></li>
    </ul>

    <p>Copyright The Range</p>

    <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

</footer>

</body>
</html>

Até mesmo o arquivo "demo" que veio na pasta junto com os icons só esta aparecendo em character...

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css"></head>
<body>
    <div class="bgc1 clearfix">
        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 7)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-clock"></span>
                <span class="mls"> icon-clock</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e94e" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="clock, time2" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-stopwatch"></span>
                <span class="mls"> icon-stopwatch</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e952" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="stopwatch, time5" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-cog"></span>
                <span class="mls"> icon-cog</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e994" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="cog, gear" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-stats-bars2"></span>
                <span class="mls"> icon-stats-bars2</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e99d" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="stats-bars2, stats4" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-google-plus"></span>
                <span class="mls"> icon-google-plus</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="ea8b" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="google-plus, brand5" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-facebook"></span>
                <span class="mls"> icon-facebook</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="ea90" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="facebook, brand10" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-twitter"></span>
                <span class="mls"> icon-twitter</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="ea96" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="twitter, brand16" class="liga unitRight" />
            </div>
        </div>
    </div>

    <!--[if gt IE 8]><!-->
    <div class="mhl clearfix mbl">
        <h1>Font Test Drive</h1>
        <label>
            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
            min="8" value="48" />
            px
        </label>
        <input id="testText" type="text" class="phl size1of1 mvl"
        placeholder="Type some text to test..." value=""/>
        <div id="testDrive" class="icon-" style="font-family: icomoon"> 
        </div>
    </div>
    <!--<![endif]-->
    <div class="bgc1 clearfix">
        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
    </div>

    <script src="demo-files/demo.js"></script>
</body>
</html>