Is there a list what icons can be used for the menu? I want to add one and need another icon for it.
This site has a font awesome list. Codes are included if you click on the icon. ;)
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?
Thanks to you three!
I want to use fa-bookmark for a new menu button for bookmarks, placed between notifications and new posts button.
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 (https://icomoon.io/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
<symbol id="icon-bookmark" viewBox="0 0 32 32"><title>bookmark</title><path d="M6 0v32l10-10 10 10v-32z"></path></symbol>
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
.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:
<!-- 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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6 0v32l10-10 10 10V0z"/></svg>
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
.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.
Would be great! Then we could split and lock your answers as a new topic if that's okay with you? A "how to..." :)
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. ;)