The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Icon Change, Going mental here
Pitz37
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 3 2017, 01:16 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pitz37
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pitz37
post Feb 3 2017, 12:00 PM
Post #4


Newbie
*

Group: Members
Posts: 15
Joined: 12-December 16
Member No.: 24,960



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 3 2017, 01:19 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 3 2017, 03:01 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd July 2017 - 11:43 PM