Problem with icons (not displayed)

Question

Problem with icons (not displayed)

Navigation

#1 by (0 votes)

1

Good morning everyone,

Recently I started to program and the truth is something I like, but I'm still a newbie and I do not think I know 1% of everything related to HTML and CSS, and that's why I'm still the problem that I am going to present to you is an absurd mistake, but I need help.

The problem is that when loading the web page, instead of leaving the icon I see a small square ... Do you know what it is?

I hereby attach the code of the web ...

*{
  margin: 0px;
  padding: 0px;
}

header{
  width: 100%;
  height: 75px;
  background-color: red;
  overflow: hidden;
}


header .title {
  font-family: Montserrat;
  font-size: 50px;
  line-height: 75px;
  text-align: center;
  color: white;
}



body .icon-menu {
  color: orange;
  margin: 100px;
  font-size: 50px;
  line-height: 75px;
}

html css web

asked by Unai 11.01.2018 в 19:13

source

1 answer

Problems to install xdebug for sublime text 3 on windows 10 Extract information about Housing and Population - Python

score 0 · Answer 1

The box that appears is because the resource (that is, the icon) is not loaded. This can happen for several reasons:

The route to the source where the icon is located is not included
The route to the source is incorrect
The class is incorrect
Network problems (if it is an external resource)

In your case it seems that you have not included the icon pack, I explain. The icons (the ones you want to add) are not native to html , so you should get that resource from somewhere, either by downloading the package (usually formed from css and svg files, woff, eof, otf, etc.) and place the folder inside your project or obtaining the link to a CDN. To include them in your page, you must declare them within the <head> tag, apparently you are adding your styles so that concept already you know it:

<head>
    <link href="http://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
    <meta charset="utf-8">
    <link href="css/estilo.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/fonts/style.css" type="text/css">
    <title>HOLA</title>
</head>

And there you must add the route to your fonts package, usually only a file .min.css is attached:

<link rel="stylesheet" href="css/a/mi/paquete/paquete.min.css" type="text/css">

and that way you can add it. If it still does not appear it can be some other problem.