Trouble getting keenicons font to work
Hi Sean and team
I'm having troubles rendering the duotone and other keenicons, which seem to just fill the icons completely, so for example for an enclosed icon there is no duo or white space, just a grey filled in version of the icon. In the case of a double icon like a double chevron arrow, only one arrow shows up.
ie. Filing and linking is correct and an icon shows up - it's just not correctly formatted - it's greyed out.
My setup is identical to your structure, i don't change anything..
In my main css:
@import url("../../fonts/keenicons/duotone/style.css");
@import url("../../fonts/keenicons/outline/style.css");
@import url("../../fonts/keenicons/solid/style.css");
In my project folder
root/fonts/keenicons
I invoke your font icons in my css like this:
font-family: 'keenicons-duotone' !important;
content: "\eb0e";
Also, not sure if this is related, but when using your demo page to view icons they show up correctly (duotones not greyed out) under the <class="ki-duotone ki-cross-circle"> <span path>:before
However, there IS what appears to be a missing font, as a black square also appears for the same item in the: <input type="text" maxlength="1" readonly="" value="" class="unitRight size1of2 talign-right">
I'm not sure if this is a bug in your demo page only.
Is there anything wrong with my linking
Replies (5)
Hi,
Glad you got the Keenicons working!
Yes, you're righ, duotone icons use separate paths to control each layer's opacity, which gives us flexibility across different styles (solid, outline, duotone) while keeping the same SVG source. This approach helps maintain consistency across all the icons.
I like your idea of combining paths or using inheritable properties like font-size and opacity to make the styling more straightforward. I’ll definitely pass your feedback on to the team, as we’re always looking for ways to improve usability.
Thanks again for sharing these info.
Thanks Faizal
FYI as a quick workaround, I added this code in a separate CSS to achieve the effect..
/*** ensure the styles of the paths for the svg elements declared in the <i></i> can be inherited FROM the <i></i> (ie. <i class="fs-3"></i> cascades to the child <i class="path">)****/
.ki-duotone *,
.ki-duotone [class^="path"],
.ki-duotone [class^="path"]:before
/*solid*/
.ki-solid *,
.ki-solid [class^="path"],
.ki-solid [class^="path"]:before
/*outline*/
.ki-outline *,
.ki-outline [class^="path"],
.ki-outline [class^="path"]:before
{
font-size: inherit;
font-weight: inherit;
background-color: inherit;
background: inherit;
color: inherit;
}It would still be nice to be able to have OPTIONAL a wrapper class or something with the svg with clippaths or ids that can wrap the svg so that coding the duo tones aren't guesswork .. because it's not clear how many paths each duotone icon needs.. some have 3 paths, some have 5 paths, and at the moment it's trial and error.
So without being too picky, having ability to specify paths is great in some situations but clumsy in others, so being able to do both would be good!
Having said that, separate access is great because I've been able to mix and match the paths to create custom icons..
Thank you for your feedback. We wlll take a look on it
Hi Faizal
Please consider this issue closed and resolved
I should've read the docs, not the readme..
https://preview.keenthemes.com/html/keen/docs/icons/keenicons
I hadn't realised duo uses separate paths - is there any reason you did this? I'm assuming you have a single file with all the svg / fonts for the icons, and are using different paths to keep the a single source of truth for solid, outline, and duo styles..
But can't you just add a wrapper path (<clipPath opacity="0.3">) around the duo svg items path1,path2,path3 so that the icon can classed in the style sheet like this:
.ki-message-question.ki-duotone:before {
content: "\ed27";
}
that way you can keep the single source of truth for 1 set of svgs for all three styles, and simplify the invokation so it's consistent?
UPDATE:
You can update your custom fonts to make them work in a more standardised way by doing combining paths 2 and 3 as they are both opacity:1, and push the opacity 0.3 path after, and the opacity:1 path before
.ki-message-text-2:after{
content: "\ed2b";
opacity: 0.3;
}
.ki-message-text-2:before {
content: "\ed2c";
position: absolute; left: 0;
}
or if unable to take this approach, then maybe to simplify the text used to call the paths and add font-size font-weight inherit on the path class, so I can just add size and weight to the main <i> and not to each of the subsequent paths?
.ki-message-text-2 .1 {
content: "\ed2c";
position: absolute; left: 0;
font-size:inherit;
}
In it's current state, using keenicons is a bit unwieldy
Hi
Could you please send a screenshot of the issue? It would help me better understand the rendering problem.
You can upload the image here:
https://imgbb.com
Thanks
