Icon Change, Going mental here |
Icon Change, Going mental here |
Pitz37 |
Feb 2 2017, 05:04 PM
Post
#1
|
Newbie Group: Members Posts: 15 Joined: 12-December 16 Member No.: 24,960 |
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/ |
pandy |
Feb 3 2017, 01:16 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
Pitz37 |
Feb 3 2017, 06:32 AM
Post
#3
|
Newbie Group: Members Posts: 15 Joined: 12-December 16 Member No.: 24,960 |
Hi Pandy
Thanks for the reply, sure will do. |
Pitz37 |
Feb 3 2017, 12:00 PM
Post
#4
|
Newbie Group: Members Posts: 15 Joined: 12-December 16 Member No.: 24,960 |
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? |
pandy |
Feb 3 2017, 01:19 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. 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. |
pandy |
Feb 3 2017, 03:01 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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.
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. |
Lo-Fi Version | Time is now: 19th April 2024 - 06:20 AM |