Missing social icons when using child theme to change color

  • Resolved qpop

    (@qpop)


    10 years, 8 months ago

    Hi,

    I followed the snippet here: https://www.themesandco.com/snippet/create-new-skin-color/

    and on doing so, the social icons don’t show at all in IE and only show as little square boxes with random code in Firefox.

    I used the standard customizr child theme folder (with nothing but the template info in style.css and nothing in the functions.php). The icons show up fine with parent theme active, but not at all with child theme active.

    If it helps, the “customize it!” button doesn’t appear either

Viewing 3 replies - 1 through 3 (of 3 total)

  • Well, that “Customiz’it!” should appear.
    About that behaviour with icons.. mm is normal.
    Look here, for example:

    @font-face {
  font-family: 'genericons';
  src: url('fonts/fonts/genericons-regular-webfont.eot');
  src: url('fonts/fonts/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/fonts/genericons-regular-webfont.woff') format('woff'), url('fonts/fonts/genericons-regular-webfont.ttf') format('truetype'), url('fonts/fonts/genericons-regular-webfont.svg#genericonsregular') format('svg');
}
@font-face {
  font-family: 'entypo';
  src: url('fonts/fonts/entypo.eot');
  src: url('fonts/fonts/entypo.eot?#iefix') format('embedded-opentype'), url('fonts/fonts/entypo.woff') format('woff'), url('fonts/fonts/entypo.ttf') format('truetype'), url('fonts/fonts/entypo.svg#genericonsregular') format('svg');
}

    This is part of a skin css. What do they mean those relative urls? Mean that it will look for those paths starting from the css base directory. So it expect to find a “fonts/fonts/entypo.ttf” in your child theme skin base directory.
    What can you do?
    1) Copy also the directory customizr/inc/css/fonts in your child theme inc/css directory (and do the same with customizr/inc/css/img)
    2) Change all those paths to make them point to the customizr files. E.g.
    url('fonts/fonts/entypo.eot'); become:
    url('../../../customizr/inc/css/fonts/fonts/entypo.eot');

    Hope this helps.

    Edit:
    Ops, if you have that problem means that you missed a part of the Step1?

    Now copy the 3 subdirectories (fonts, img and rtl) from /wp-content/themes/customizr/inc/css to /wp-content/themes/customizr-child/inc/css/

    Thread Starter qpop

    (@qpop)

    D’oh! Looks like I did.

    I actually much prefer the idea of only changing the file (as recommended by you in the post) so that there is the least amount of data in the child theme as possible.

    Thanks for your help!

    Hope you can solve ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Missing social icons when using child theme to change color’ is closed to new replies.