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/
Full Version: Icon Change
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.
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.
Hi Pandy
Thanks for the reply, sure will do.
Thanks for the reply, sure will do.
QUOTE(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.
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?
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.
The CSS files are extremely hard to read, no whitespace at all. There are a lot of characters inserted in this manner though.
CODE
.nc-icon-glyph.travel_white-house:before{content:"\eb84"}
The font is probably called Nucleo Glyph.
CODE
.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.
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.
CODE
<link rel="stylesheet" id="google-fonts-css" href="//fonts.googleapis.com/css?family=Lato:400,700%7CMontserrat:400,700" type="text/css" media="all">
Or the style sheet could be loaded with @import.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.