Skip to main content
Topic: Menu icons (Read 3226 times) previous topic - next topic
0 Members and 2 Guests are viewing this topic.

Menu icons

Is there a list what icons can be used for the menu? I want to add one and need another icon for it.

Re: Menu icons

Reply #1

This site has a font awesome list. Codes are included if you click on the icon.  ;)

Re: Menu icons

Reply #2

I think you should be able to use any font awesome icons.

Re: Menu icons

Reply #3

Technically you can use whatever icon you want, you can just add it somewhere and refer to it in your css. ;)
I would use that technique over any other, because those "readily available" are those used in the software that are quite limited (you can see the names from icons_svg.css in your theme CSS folder).

In order to give you some more meaningful answer, what icon do you need and where do you want to put it?
Bugs creator.
Features destroyer.
Template killer.

Re: Menu icons

Reply #4

Thanks to you three!

I want to use fa-bookmark for a new menu button for bookmarks, placed between notifications and new posts button.

Re: Menu icons

Reply #5

This will seem like a WTF, ZOMG, why is this so difficult, but its just a few easy steps between you and icon nirvana.  Note this is just how I do it, it may not be, and is likely not, the best, but when I need an icon or two for use its what I do.  There are some tools to pull entire font sets to SVG, search for font ripper on github for inspiration

A quick guide for how to use / add SVG icons to ElkArte 1.1

Selection your Icon(s)
  • Go to IcoMoon App This app has a large collection of free (and pay for) icon sets from which you can choose.
  • Select "Add Icons From Library" and choose the icon library(s) that you want to work with.  For example I keep three (3) sets in my working project :: Font Awesome, Material Icons and Icomoon free (ElkArte uses many from the Icomoon free set)
  • Find the icon or icons that you like.  Using search will search inside of all the sets and return "smart" results.  For example searching on bookmark will get bookmark, stars, hearts, etc which helps with some creativity.
  • Select a bookmark icon you like, I choose the single one form the Icomoon set for this write up.  At the screen bottom select  "Generate SVG and More" button
  • At the top of this page you must set the size of the icon, generally the icons used are 32px. so use that

Damit, I want my icon now method
  • Hover over your icon image, and select "get code"
  • Copy the section the says "Symbol Definition"  in this example it should be as follows
Code: [Select]
<symbol id="icon-bookmark" viewBox="0 0 32 32"><title>bookmark</title><path d="M6 0v32l10-10 10 10v-32z"></path></symbol>
  • Go to Encode SVG SCSS and agree with Cartman
  • Paste the above code into the textbox that syas "Past SVG code here"
  • It will be converted and highlighted so you can copy it again, Now it looks like
Code: [Select]
background-image: url("data:image/svg+xml,%3Csymbol id='icon-bookmark' viewBox='0 0 32 32'%3E %3Ctitle%3Ebookmark%3C/title%3E %3Cpath d='M6 0v32l10-10 10 10v-32z'%3E%3C/path%3E %3C/symbol%3E");
  • Open your CSS file and add it as a new icon BUT change the generated background-image: to content: as follows
Code: [Select]
.i-bookmark::before {
content: url("data:image/svg+xml,%3Csymbol id='icon-bookmark' viewBox='0 0 32 32'%3E %3Ctitle%3Ebookmark%3C/title%3E %3Cpath d='M6 0v32l10-10 10 10v-32z'%3E%3C/path%3E %3C/symbol%3E");
}
  • Use it in your markup as <i class="icon i-bookmark"></i>

Damit, I want my icons to be optimized method
  • Instead of using "get code" select "Download SVG" at the botton of the page BUT first select the gear icon next to the download button and make sure override size is set to 32 or whatever size you needed.  You can also select other formats, but we only want the SVG version so I de-select the rest.
  • Open the downloaded file, naviate to the SVG folder, open the svg file in your text editor and copy all of that markup. In this example it should be as follows:
Code: [Select]
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>bookmark</title>
<path d="M6 0v32l10-10 10 10v-32z"></path>
</svg>
  • Go to SVGOMG! and select "Paste Markup" and paste the above.  Alternatively you can skip use open SVG and select the SVG icon you downloaded from above, skipping the copy / paste method.
  • You will now see the icon in the editor, if you don't you mussed up!
  • Select the optimizations you want, the defaults are fine but also select "Multipass", "Remove Title", "Prefer viewbox to width/height"
  • Select the markup tab and copy your new optimized SVG code
Code: [Select]
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6 0v32l10-10 10 10V0z"/></svg>
  • Go to Encode SVG SCSS and nod to Cartman
  • Paste the above code in the "Paste SVG code here" textbox and copy the results which will magically replace what you just pasted.
Code: [Select]
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 0v32l10-10 10 10V0z'/%3E%3C/svg%3E");
  • Open your CSS file and add it as a new icon BUT change the above background-image: to content: as follows
Code: [Select]
.i-bookmark::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 0v32l10-10 10 10V0z'/%3E%3C/svg%3E");
}
  • Use it in your markup as <i class="icon i-bookmark"></i>

You can change colors, fills, weights, etc ... if wanted I can to a short write up on that as well.

Re: Menu icons

Reply #6

Quote from: Spuds – You can change colors, fills, weights, etc ... if wanted I can to a short write up on that as well.

Would be great! Then we could split and lock your answers as a new topic if that's okay with you? A "how to..."  :)

Re: Menu icons

Reply #7

Thanks, I did it! Hurray!  :D

For 1.1.5 please use some nicer icons. Or at least they should have the same background color and line width.  ;)