Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Icon Change
Posted by: Pitz37 Feb 2 2017, 05:04 PM
Hi all
I need to change the icons to something more relevant to the headings. -Site is offline at present but have provided code below. I want to change the heartbeat icon and sorry it’s super novice but I’m literally learning at the moment and I’d just like some advice really on best way to do it.
`<section id=”services-block” class=”home content-block”>
<div class=”spacer-5x visible-sm visible-xs”></div>
<div class=”col-lg-3 col-sm-6″>
<div class=”service”>
<div class=”icon”>
<span class=”nc-icon-outline health_heartbeat-16″></span>
</div>
The demo site is here
http://www.demos.machothemes.com/regina-lite/
Posted by: pandy Feb 3 2017, 01:16 AM
Well, there are no images in the HTML. So the icon must be in the CSS, a background image.
Also, there are curly quotes in the snip you posted. That won't do. Don't use Word and the like to edit HTM, CSS or code. Use a plain text editor or a dedicated HTML editor if you must, not a word processor anyway.
Posted by: Pitz37 Feb 3 2017, 06:32 AM
Hi Pandy
Thanks for the reply, sure will do.
Posted by: Pitz37 Feb 3 2017, 12:00 PM
Well, there are no images in the HTML. So the icon must be in the CSS, a background image.
Also, there are curly quotes in the snip you posted. That won't do. Don't use Word and the like to edit HTM, CSS or code. Use a plain text editor or a dedicated HTML editor if you must, not a word processor anyway.
Thanks Pandy, looking at the demo site would the icons be physical image files within the theme or are they pulled form the net when page loads? Would I be able to find the appropriate code for a different Nucleo Outline icon and just replace it in the html/css?
Posted by: pandy Feb 3 2017, 01:19 PM
I didn't look so close at the page. Do you mean those tiny black symbols, phone, envelope and so on? I think they actually are fonts. Probably loaded from google fonts.
The CSS files are extremely hard to read, no whitespace at all. There are a lot of characters inserted in this manner though.
The font is probably called Nucleo Glyph.
.nc-icon-glyph {
font: normal normal normal 14px/1 "Nucleo Glyph";
-webkit-font-smoothing: antialiased;
}
I found that with my browser's inspector. I don't have the stamina to actually try to read the CSS files. But in one of them you should find an @font-face rule and there you will find the URL to the font.
Posted by: pandy Feb 3 2017, 03:01 PM
Or come to think of it it's probably more likely a style sheet with the @fon't face rule is loaded from Google. That could be done with an ordinary LINK, but the only one I find is this, obviously for other fonts.
Or the style sheet could be loaded with @import.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)