gk-short-menu

Home Page:
How can I replace icons with my own? Or edit existing set?

Icons used in the gk-short-menu can be replaced with other. Full list of the available icons:

gk-icon-coffee
gk-icon-coffee-solid
gk-icon-cutlery
gk-icon-cutlery-solid
gk-icon-dinner-set
gk-icon-dinner-set-solid
ect.

Hello,

In this case you can create an own set using this free service: fontastic.me - you have to upload your SVG images with icons and you can generate a new icon set.

Hello,

In this case you can create an own set using this free service: fontastic.me - you have to upload your SVG images with icons and you can generate a new icon set.

Thanks, I would not know where to start - is their perhaps documentation on how to replace the icons with my own? From coding what file, to placing of my icons?

Tutorial is available here: http://fontastic.me/howto

After generating the icon font you have to add the CSS code to the one of the template CSS files i.e. css/gk.stuff.css and optionally fix the paths to the font files - then your own icon CSS classes should work properly.

[*] I selected an icon (cup)
[*] customized Q for a
[*] and uploaded the eot-, svg-, ttf- and woff-files in fonts/untitled-font-1
[*] changed the path in css to fonts/untitled-font-1/
[*] uploaded the css-code to override.css (and activated this)
[*] Prayed
But unfortunatly only the letter "Q" appears .
Can you tell me what went wrong?

Code: Select all

@charset "UTF-8";

@font-face {
  font-family: "untitled-font-1";
  src:url("fonts/untitled-font-1/untitled-font-1.eot");
  src:url("fonts/untitled-font-1/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-1/untitled-font-1.woff") format("woff"),
    url("fonts/untitled-font-1/untitled-font-1.ttf") format("truetype"),
    url("fonts/untitled-font-1/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "untitled-font-1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "untitled-font-1" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cup:before {
  content: "Q";
}

in override.css (and activated this )

I forgot to mention I added

Code: Select all

<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#"><i class="icon-cup"></i> <span>Test</span></a></li>

to the module header.

FOUND IT!!!
CHanged in override.css

Code: Select all

  src:url("../fonts/untitled-font-1/untitled-font-1.eot");
  src:url("fonts/untitled-font-1/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-1/untitled-font-1.woff") format("woff"),
    url("fonts/untitled-font-1/untitled-font-1.ttf") format("truetype"),
    url("fonts/untitled-font-1/untitled-font-1.svg#untitled-font-1") format("svg");

to

Code: Select all

src:url("../fonts/untitled-font-1/untitled-font-1.eot");
  src:url("../fonts/untitled-font-1/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("../fonts/untitled-font-1/untitled-font-1.woff") format("woff"),
    url("../fonts/untitled-font-1/untitled-font-1.ttf") format("truetype"),
    url("../fonts/untitled-font-1/untitled-font-1.svg#untitled-font-1") format("svg");
}

As I understand fragment:

optionally fix the paths to the font files

fixed your problem?

Yes, but "optionally fix the paths to the font files" was vague

Sorry for join the question. I do not want to clutter the forum. I changed the menu, but only two of all the icons do not increase. What could be the reason? http://restauracja.kulczynski.art.pl

@ukasz - these two icons have different font-size defined in:

Code: Select all

#gkHeaderMod .gk-short-menu .gk-icon-dinner-set-solid

and

Code: Select all

#gkHeaderMod .gk-short-menu .gk-icon-calendar-solid

selectors.

BTW nice picture in the header

Hi!
But the gk-icon set is limitied? What if I want to use other icon from Font Awesome that is not included in your set? How to add "icon-leaf", for example?
All the best,
Per

In this case you have to use the following CSS class: fa fa-leaf for the <i> element.

hello,
I have tried some things which are above, but the Costom HTML Editor does not accept the code.
I've added it as:

Code: Select all

<li data-scroll-reveal = "enter bottom over .5s after .25s">
   <a href="#menu"> <i class = "cb-icon-coffee-solid"> </ i>
     <span> Menu </ span>
   code
</ li>

if I want to look at me the code in the editor under "Source Code", is this unchanged

Code: Select all

<li data-scroll-reveal = "enter bottom over .5s after .25s">
   <a href="#menu"> menu </a>
</ li>

After the installation of the quick starts, the module is as shown on the sample page.
As soon as I change the module, for example, the logo, the icons are no longer displayed.

What can I do here

Greetings Sven

Hello again,

Please disable the TinyMCE editor - set the none editor. The TinyMCE editor removes empty tags.