What is the best perfomatic way to put a simple icon in HTML?
I'm working in a website with a mobile menu, so had to use a hamburger icon to it.
I found 3 ways:
- Use FontAwesome or some lib like that
- Use a SVG
- Use the three bars charactere
I exclude from my options because Font awesome library is a very big lib to use just a simple icon. So I figure out this charactere: ≡. So I thought: "Omg, i just have to put it on my HTML and it's ok!"
But I was thinking that it is maybe too easy to be true. So i had to come here and ask you guys: Is this correct? Is this supported by browsers in a large scale? Is there a better way to just use a simple icon?
Thanks!
html css
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
add a comment |
I'm working in a website with a mobile menu, so had to use a hamburger icon to it.
I found 3 ways:
- Use FontAwesome or some lib like that
- Use a SVG
- Use the three bars charactere
I exclude from my options because Font awesome library is a very big lib to use just a simple icon. So I figure out this charactere: ≡. So I thought: "Omg, i just have to put it on my HTML and it's ok!"
But I was thinking that it is maybe too easy to be true. So i had to come here and ask you guys: Is this correct? Is this supported by browsers in a large scale? Is there a better way to just use a simple icon?
Thanks!
html css
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
1
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
1
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07
add a comment |
I'm working in a website with a mobile menu, so had to use a hamburger icon to it.
I found 3 ways:
- Use FontAwesome or some lib like that
- Use a SVG
- Use the three bars charactere
I exclude from my options because Font awesome library is a very big lib to use just a simple icon. So I figure out this charactere: ≡. So I thought: "Omg, i just have to put it on my HTML and it's ok!"
But I was thinking that it is maybe too easy to be true. So i had to come here and ask you guys: Is this correct? Is this supported by browsers in a large scale? Is there a better way to just use a simple icon?
Thanks!
html css
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
I'm working in a website with a mobile menu, so had to use a hamburger icon to it.
I found 3 ways:
- Use FontAwesome or some lib like that
- Use a SVG
- Use the three bars charactere
I exclude from my options because Font awesome library is a very big lib to use just a simple icon. So I figure out this charactere: ≡. So I thought: "Omg, i just have to put it on my HTML and it's ok!"
But I was thinking that it is maybe too easy to be true. So i had to come here and ask you guys: Is this correct? Is this supported by browsers in a large scale? Is there a better way to just use a simple icon?
Thanks!
html css
html css
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
asked Nov 19 '18 at 12:45
JohnsonJohnson
2271519
2271519
1
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
1
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07
add a comment |
1
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
1
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07
1
1
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
1
1
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07
add a comment |
1 Answer
1
active
oldest
votes
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374955%2fwhat-is-the-best-perfomatic-way-to-put-a-simple-icon-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
add a comment |
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
add a comment |
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}<button class='burger'></button>answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
answered Nov 19 '18 at 12:51
Aaron McGuireAaron McGuire
4328
4328
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374955%2fwhat-is-the-best-perfomatic-way-to-put-a-simple-icon-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
If you need only one icon - css-tricks.com/three-line-menu-navicon pseudo elements then
– Smollet777
Nov 19 '18 at 12:49
1
The char has the fastest loading time obviously! but you have very little control over how it will look on different devices. SVG is the second fastest to load, and about the font, if you want to use lots of icons in your page, it could be a good thing, but if you want it only for one or two icon, it definitely not worth it because user have to load the complete font file (usually >100kb) for icons to get displayed. (personally I would use SVG)
– Hadi290
Nov 19 '18 at 12:55
Nice explanation @Hadi290!! Very clear :)
– Johnson
Nov 19 '18 at 13:07