Close

Prisma Font family

ryaneklipse
6 years ago
#14667 Quote
Avatar
  • 4
Hey everyone!

I'm working on adding some different social icons, but would like to match the current format of the social icons on the prisma nop-template. Looking at the other icons, they use the prisma font-family which is defined here:



@font-face {
    font-family: 'prisma';
    src:  url('../font/prisma.eot?xwq28l');
    src:  url('../font/prisma.eot?xwq28l#iefix') format('embedded-opentype'),
    url('../font/prisma.ttf?xwq28l') format('truetype'),
    url('../font/prisma.woff?xwq28l') format('woff'),
    url('../font/prisma.svg?xwq28l#prisma') format('svg');
    font-weight: normal;
    font-style: normal;
}

I'm curious, is there any way to view the entirety of the font family? And if anyone knows specifically, does this font-family have an icon for Houzz?

Thanks!
Valentin
6 years ago
#14668 Quote
Avatar
  • 172
ryaneklipse wrote:
Hey everyone!

I'm working on adding some different social icons, but would like to match the current format of the social icons on the prisma nop-template. Looking at the other icons, they use the prisma font-family which is defined here:



@font-face {
    font-family: 'prisma';
    src:  url('../font/prisma.eot?xwq28l');
    src:  url('../font/prisma.eot?xwq28l#iefix') format('embedded-opentype'),
    url('../font/prisma.ttf?xwq28l') format('truetype'),
    url('../font/prisma.woff?xwq28l') format('woff'),
    url('../font/prisma.svg?xwq28l#prisma') format('svg');
    font-weight: normal;
    font-style: normal;
}

I'm curious, is there any way to view the entirety of the font family? And if anyone knows specifically, does this font-family have an icon for Houzz?

Thanks!



Greetings,

yes, we are using icon-font for the icons in Prisma and you can see all of the icons in the font by going to this site.

Then you go in your file explorer to this location:

~ Presentation\Nop.Web\Themes\Prisma\Content\font

when you are there you drag and drop the prisma.svg file on the site you have just opened. A pop-up will show up on which you click OK. You will see all of the icons in the font generated.

If you want to use some of the icons you already have, just select all of the icons as described here. Then select Generate font on the bottom. This will give you the code you need to use for each icon.

DO NOT REARRANGE THE ICONS IN ANY WAY. This will change the code value and you will not be able to use them.

If you want to add more icons, just drag and drop them on top of the prisma font, then select them and then use the Move tool and drag them right at the end of the icons. This way the already existing icons will not lose their code value.

For more information please read the documentation of the site.

After you add your new icons to the font, you generate it and you download it you need to replace it in the above-mentioned location. Just as a precaution copy the original font somewhere so in case something breaks you can always switch the font back.

Hope this was helpful.
Best Regards,

Valentin Kirov
Nop-Templates.com
ryaneklipse
6 years ago
#14671 Quote
Avatar
  • 4
Thanks so much for the response, I followed your instructions and found a library with the icon I was looking for. It works great, thanks for the help!