I want to print the icons on my html page

Question

In this code I linked some icons in to my html page. I want to print them in my html page. How can I do it?. I don't get any sufficient answer on my searches so apologies if this is a duplicate. in this linkthey have shown how to style icons loaded from internet using and tag,instead of internet i want to load from my computer using the same tags,can you help me?

<html>
    <head>
       <!-- <link rel="stylesheet" href="make.css">
        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">-->
        <link rel="icon" type="image/png" href="icona.png" sizes="32x32" />
         <link rel="icon" type="image/png" href="iconb.png" sizes="32x32" />
         <link rel="icon" type="image/png" href="iconc.png" sizes="32x32" />
         <link rel="icon" type="image/png" href="icond.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
    </head>
    <body>

    </body>
</html>

for example here the <i> tag is used to load an icon.

<a id="fa-flag" href="javascript:;" onClick="$C.setIcon()">
  <i class="fa fa-flag"> </i>fa-flag
</a>

Do you want to display the icons in html page and print the page ? — Shahil M, Aug 19 '16 at 06:25
The OP's question is misleading. Above looks like they want to load an image file, from comments it appears they want to apply FontAwesome styling to their own icon files (which isn't really applicable). — Devon Bernard, Aug 19 '16 at 06:58

Devon Bernard · Accepted Answer · 2016-08-19T06:29:55.990

2

The link tags you are using are for setting the pages favicon icon (icon in the browser tab).

To add the image to the HTML page for rendering, you'd need to add an img tag within the document's body.

<body>
   <img src="favicon-32x32.png" height="32" width="32" />
<body>

edited Aug 19 '16 at 06:29

answered Aug 19 '16 at 06:27

Devon Bernard

2,250
5
19
32

@dreamhunter Can you please clarify what you mean by icon color? You can apply CSS Filters (https://css-tricks.com/almanac/properties/f/filter/), but unless the filter needs to be dynamic it's suggested to edit the image before uploading it to minimize computation. – Devon Bernard Aug 19 '16 at 06:32
@mplungjan You can inspect my answer, I got downvoted too. :/ – Devon Bernard Aug 19 '16 at 06:35
I did, hence the comment – mplungjan Aug 19 '16 at 06:35
in the above link they have shown how to style icons loaded from internet using and tag,instead of internet i want to load from my computer using the same tags,can you help me? – ADH - THE TECHIE GUY Aug 19 '16 at 06:49
@dreamhunter The link you posted is to a library called font-awesome, that created icons from elements. You don't specify a file-path. Look at their code example http://www.w3schools.com/icons/tryit.asp?filename=tryicons_awesome – Devon Bernard Aug 19 '16 at 06:51
What you're looking for is adding `` to your page, but change `fa-cloud` to the specific icon you're looking to add, you can use this official page for reference, http://fontawesome.io/icons/ . That page lists all the icons and their classNames that must be referenced. – Devon Bernard Aug 19 '16 at 06:52
1

The reason why you can add color and distort FontAwesome icons is because that library renders them as text, they aren't actually images (jpg, png, etc). You can't apply text color styling to images. To achieve a similar affect you'd need to use css-tricks.com/almanac/properties/f/filter, but keep in mind this won't look exactly the same with semi-transparent images. – Devon Bernard Aug 19 '16 at 06:55

score 2 · Answer 2 · answered Aug 19 '16 at 06:47

You cannot use link tag for displaying icons on your page. Its use is to load external stylesheets and setting icon of browser tab( favicon ). You can refer the following link for more details.

To display images you can do two things :-

1) By an img tag :-

<body>
   <img src="icona.png" height="32" width="32" />
   <img src="iconb.png" height="32" width="32" />
   <img src="iconc.png" height="32" width="32" />
   <img src="icond.png" height="32" width="32" />
   <img src="favicon-16X16.png" height="16" width="16" />
<body>

2) By a div tag :-

html:-

<body>
   <div class="image-icona" height="32" width="32"></div>
<body>

css:-

.image-icona{
    width: 32px;
    height: 32px;
    background-image: url("../img/icona.png");
    background-repeat: no-repeat;
    background-size: contain;
}

Shahil M · Answer 3 · 2016-08-19T08:57:43.200

0

IMG TAG

You need to use img tag to display a picture in the webpage

LINK TAG

The tag is used for defining a link to an external document.

edited Aug 19 '16 at 08:57

answered Aug 19 '16 at 06:32

Shahil M

3,836
4
25
44

Why the downvote? Donvotes without comments are useless. – Shahil M Aug 19 '16 at 06:34
`the tag is used to link to external style sheets.` and no other suggestion? – mplungjan Aug 19 '16 at 06:35
I did. It is not answering the question and link is used for many other things than style sheets – mplungjan Aug 19 '16 at 07:27
Improve your answer to get the down vote removed - no need to take it personally. Instead see it as a constructive criticism – mplungjan Aug 19 '16 at 08:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121327/discussion-between-shahil-and-mplungjan). – Shahil M Aug 19 '16 at 08:57
I deleted my answer. It did not answer the actual question asked. – mplungjan Aug 19 '16 at 12:07

I want to print the icons on my html page

3 Answers3