Topic: Adding Icon Fonts to X Theme

Tagged: x

1 2 →

Author

Posts

June 15, 2016 at 1:32 pm #1043723

Participant

Good afternoon all,

I have been fighting with a custom icon that’s been added to the “Follow Me” section at http://dev.emilycolin.com/ and the sidebar widget at a few other sections on the site. Since it’s not a font-awesome font the size issue on different screen has been problematic at best. The icon in question is the Goodreads icon.

I found a package of fonts at http://shalinguyen.github.io/socialicious/ that has the Goodreads font in it. The package comes with EOT, SVG, TrueType font file, and WOFF files. It also has it’s own CSS file.

My question is, how can I upload these files to the X Theme and use them in place of this problematic icon png?

Thanks for your time.

June 15, 2016 at 2:01 pm #1043781

Rahul

Moderator

Hey There,

You can follow this guide : https://community.theme.co/forums/topic/adding-fonts/#post-78776

Hope that helps.

Thanks

June 15, 2016 at 7:24 pm #1044182

wnhorne246

Participant

This reply has been marked as private.

June 16, 2016 at 12:23 am #1044582

Rupok

Member

Hi there,

Thanks for updating. It seems you didn’t upload the fonts on right folder as I can’t access the font file directly with the URL – http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.woff

Also you have placed http:/dev.emilycolin.com/wp-content/themes/x-child/http:/dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.woff but it should be http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.woff

Let’s fix the paths and make sure the URLs are accessible.

Cheers!

June 16, 2016 at 2:17 am #1044704

wnhorne246

Participant

OK, I have moved the folder to the right directory. It’s a bit confusing as the post you referenced was using a few different paths and folder names (e.g. font vs fonts). The folder is now in the same directory as the x-child’s style.css file, which does make sense. It should be accessible now. I also changed the CSS as instructed to…

/* Socialicious Font */
@font-face {
    font-family: 'socialicious' !important; 
    src: url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.eot');
    src: url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.eot?#iefix') format('embedded-opentype'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.woff') format('woff'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.ttf') format('truetype'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

div {
    font-family: 'socialicious';
}

Sorry about the confusion. My brain is a bit frazzled!

June 16, 2016 at 2:33 am #1044720

Paul R

Moderator

No worries. Have a great day!

June 16, 2016 at 3:14 am #1044777

wnhorne246

Participant

Still need the next steps here. I’ve done everything required, but have no idea what’s next?

June 16, 2016 at 3:29 am #1044795

Friech

Moderator

Hi There,

Given that you properly integrate the font. You can output the icon with  tag:

e.g.


Refer to the socialicious link that you provided above for class name of the icons.

Any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

June 16, 2016 at 4:19 am #1044865

wnhorne246

Participant

I think it’s working because when I used the example from the link of the post provided by Rahul…

e.g.

div {
    font-family: socialicious;
}

All my text on mobile changed to the entire group of fonts! LOL

The specific font that I’m interested in calling is .icon-goodreads-sign as far as the makers site is concerned. How would I call that specific font?

June 16, 2016 at 4:31 am #1044883

wnhorne246

Participant

I just used…

i {
    font-family: socialicious;
}

and this to call it…

I can see it on mobile at http://dev.emilycolin.com/11-75-personal-peculiarities/ at the very bottom of the page, but it’s not showing up on desktop. It just shows a somewhat iconish “v”

June 16, 2016 at 6:11 am #1044988

Paul R

Moderator

Hi,

It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

June 16, 2016 at 7:17 am #1045059

wnhorne246

Participant

I’m not sure if it’s an issue with a plugin as I’m just running what plugins that came with X. I think it’s more of a pathing/end user issue. Here is the style.css that I placed in the x-child’s folder.


Theme Name: X &ndash; Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

@font-face {
  font-family: "Socialicious";
  src: url("../font/socialicious.eot");
  src: url("../font/socialicious.eot?#iefix") format("embedded-opentype"), url("../font/socialicious.ttf") format("truetype"), url("../font/socialicious.svg#socialicious") format("svg"), url("../font/socialicious.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
  
[data-icon]:before {
  font-family: "Socialicious" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "Socialicious" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-bebo:before {
  content: "a"; }

.icon-bebo-sign:before {
  content: "b"; }

.icon-behance:before {
  content: "c"; }

.icon-behance-sign:before {
  content: "d"; }

.icon-bread:before {
  content: "e"; }

.icon-bread-sign:before {
  content: "f"; }

.icon-digg:before {
  content: "g"; }

.icon-digg-sign:before {
  content: "h"; }

.icon-disqus:before {
  content: "i"; }

.icon-disqus-sign:before {
  content: "j"; }

.icon-dribbble:before {
  content: "k"; }

.icon-dribbble-sign:before {
  content: "l"; }

.icon-facebook:before {
  content: "m"; }

.icon-facebook-sign:before {
  content: "n"; }

.icon-flickr:before {
  content: "o"; }

.icon-flickr-sign:before {
  content: "p"; }

.icon-github:before {
  content: "s"; }

.icon-github-sign:before {
  content: "t"; }

.icon-goodreads:before {
  content: "u"; }

.icon-goodreads-sign:before {
  content: "v"; }

.icon-googleplus:before {
  content: "w"; }

.icon-googleplus-sign:before {
  content: "x"; }

.icon-instagram:before {
  content: "y"; }

.icon-instagram-sign:before {
  content: "z"; }

.icon-klout:before {
  content: "A"; }

.icon-klout-sign:before {
  content: "B"; }

.icon-lastfm:before {
  content: "C"; }

.icon-lastfm-sign:before {
  content: "D"; }

.icon-linkedin:before {
  content: "E"; }

.icon-linkedin-sign:before {
  content: "F"; }

.icon-pinterest:before {
  content: "G"; }

.icon-pinterest-sign:before {
  content: "H"; }

.icon-pocket:before {
  content: "I"; }

.icon-pocket-sign:before {
  content: "J"; }

.icon-quora:before {
  content: "K"; }

.icon-quora-sign:before {
  content: "L"; }

.icon-reddit:before {
  content: "M"; }

.icon-reddit-sign:before {
  content: "N"; }

.icon-soundcloud:before {
  content: "O"; }

.icon-soundcloud-sign:before {
  content: "P"; }

.icon-spotify:before {
  content: "Q"; }

.icon-spotify-sign:before {
  content: "R"; }

.icon-stumbleupon:before {
  content: "S"; }

.icon-stumbleupon-sign:before {
  content: "T"; }

.icon-techendo:before {
  content: "U"; }

.icon-techendo-sign:before {
  content: "V"; }

.icon-tumblr:before {
  content: "W"; }

.icon-tumblr-sign:before {
  content: "X"; }

.icon-twitter:before {
  content: "Y"; }

.icon-twitter-sign:before {
  content: "Z"; }

.icon-vevo:before {
  content: "0"; }

.icon-vevo-sign:before {
  content: "1"; }

.icon-vimeo:before {
  content: "2"; }

.icon-vimeo-sign:before {
  content: "3"; }

.icon-wordpress:before {
  content: "4"; }

.icon-wordpress-sign:before {
  content: "5"; }

.icon-yelp:before {
  content: "8"; }

.icon-yelp-sign:before {
  content: "9"; }

.icon-youtube:before {
  content: "!"; }

.icon-youtube-sign:before {
  content: "\""; }

.icon-aboutme:before {
  content: "#"; }

.icon-aboutme-sign:before {
  content: "$"; }

.icon-angellist:before {
  content: "%"; }

.icon-angellist-sign:before {
  content: "&"; }

.icon-dropbox:before {
  content: "'"; }

.icon-dropbox-sign:before {
  content: "("; }

.icon-meetup:before {
  content: ")"; }

.icon-meetup-sign:before {
  content: "*"; }

.icon-medium:before {
  content: "+"; }

.icon-medium-sign:before {
  content: ","; }

.icon-foursquare:before {
  content: "q"; }

.icon-foursquare-sign:before {
  content: "r"; }

.icon-yahoo:before {
  content: "6"; }

.icon-yahoo-sign:before {
  content: "7"; }

/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: none; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none; }

/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block; }

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 1.3333333333333333em; }

.btn [class^="icon-"],
.nav [class^="icon-"],
.btn [class*=" icon-"],
.nav [class*=" icon-"] {
  display: inline-block;
  color: #fff;
  margin-right: 2px;
  margin-top: -2px;
  /* keeps button heights with and without icons the same */ }

.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
  line-height: .9em; }

.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
  display: inline-block; }

.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"] {
  /* keeps button heights with and without icons the same */ }

.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
  line-height: .9em; }

li [class^="icon-"],
.nav li [class^="icon-"],
li [class*=" icon-"],
.nav li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center; }

li [class^="icon-"].icon-large,
.nav li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large {
  /* increased font size for icon-large */
  width: 1.5625em; }

ul.icons {
  list-style-type: none;
  text-indent: -0.75em; }

ul.icons li [class^="icon-"],
ul.icons li [class*=" icon-"] {
  width: .75em; }

.icon-muted {
  color: #eeeeee; }

.icon-border {
  border: solid 1px #eeeeee;
  padding: .2em .25em .15em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.icon-2x {
  font-size: 2em; }

.icon-2x.icon-border {
  border-width: 2px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.icon-3x {
  font-size: 3em; }

.icon-3x.icon-border {
  border-width: 3px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

.icon-4x {
  font-size: 4em; }

.icon-4x.icon-border {
  border-width: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; }

[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
  margin-right: .3em; }

[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
  margin-left: .3em; }

.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
  margin-top: .18em; }

.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
  line-height: .8em; }

.btn.btn-small [class^="icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
  margin-top: .25em; }

.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
  margin-top: 0; }

.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
  margin-top: .05em; }

.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
  margin-right: .2em; }

.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
  margin-left: .2em; }

.btn-facebook {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #355089;
  background-image: -moz-linear-gradient(top, #3b5998, #2d4373);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#2d4373));
  background-image: -webkit-linear-gradient(top, #3b5998, #2d4373);
  background-image: -o-linear-gradient(top, #3b5998, #2d4373);
  background-image: linear-gradient(to bottom, #3b5998, #2d4373);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF3B5998', endColorstr='#FF2D4373', GradientType=0);
  border-color: #2d4373 #2d4373 #17233c;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #2d4373;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border-color: #1e2e4f; }
  .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .btn-facebook.disabled, .btn-facebook[disabled] {
    color: white;
    background-color: #2d4373;
    *background-color: #263961; }
  .btn-facebook:active, .btn-facebook.active {
    background-color: #1e2e4f \9; }

.btn-linkedin {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #426ba5;
  background-image: -moz-linear-gradient(top, #4875b4, #395d90);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4875b4), to(#395d90));
  background-image: -webkit-linear-gradient(top, #4875b4, #395d90);
  background-image: -o-linear-gradient(top, #4875b4, #395d90);
  background-image: linear-gradient(to bottom, #4875b4, #395d90);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4875B4', endColorstr='#FF395D90', GradientType=0);
  border-color: #395d90 #395d90 #243a59;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #395d90;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border-color: #2b466b; }
  .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .btn-linkedin.disabled, .btn-linkedin[disabled] {
    color: white;
    background-color: #395d90;
    *background-color: #32517d; }
  .btn-linkedin:active, .btn-linkedin.active {
    background-color: #2b466b \9; }

.btn-twitter {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #1ebff5;
  background-image: -moz-linear-gradient(top, #33ccff, #00ace6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33ccff), to(#00ace6));
  background-image: -webkit-linear-gradient(top, #33ccff, #00ace6);
  background-image: -o-linear-gradient(top, #33ccff, #00ace6);
  background-image: linear-gradient(to bottom, #33ccff, #00ace6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF33CCFF', endColorstr='#FF00ACE6', GradientType=0);
  border-color: #00ace6 #00ace6 #007399;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #00ace6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border-color: #00a4db; }
  .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .btn-twitter.disabled, .btn-twitter[disabled] {
    color: white;
    background-color: #00ace6;
    *background-color: #0099cc; }
  .btn-twitter:active, .btn-twitter.active {
    background-color: #0086b3 \9; }

.btn-github {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: black;
  background-image: -moz-linear-gradient(top, black, black);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(black));
  background-image: -webkit-linear-gradient(top, black, black);
  background-image: -o-linear-gradient(top, black, black);
  background-image: linear-gradient(to bottom, black, black);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF000000', endColorstr='#FF000000', GradientType=0);
  border-color: black black black;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: black;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border-color: black; }
  .btn-github:hover, .btn-github:focus, .btn-github:active, .btn-github.active, .btn-github.disabled, .btn-github[disabled] {
    color: white;
    background-color: black;
    *background-color: black; }
  .btn-github:active, .btn-github.active {
    background-color: black \9; }

.btn-google {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #c83e2d;
  background-image: -moz-linear-gradient(top, #dc4a38, #aa2d1e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc4a38), to(#aa2d1e));
  background-image: -webkit-linear-gradient(top, #dc4a38, #aa2d1e);
  background-image: -o-linear-gradient(top, #dc4a38, #aa2d1e);
  background-image: linear-gradient(to bottom, #dc4a38, #aa2d1e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDC4A38', endColorstr='#FFAA2D1E', GradientType=0);
  border-color: #aa2d1e #aa2d1e #691c12;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #aa2d1e;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border-color: #a12b1c; }
  .btn-google:hover, .btn-google:focus, .btn-google:active, .btn-google.active, .btn-google.disabled, .btn-google[disabled] {
    color: white;
    background-color: #aa2d1e;
    *background-color: #94271a; }
  .btn-google:active, .btn-google.active {
    background-color: #7e2216 \9; }

/* Social Identities */
i.icon-aboutme-sign, i.icon-aboutme {
  color: #00405d; }

i.icon-angellist-sign, i.icon-angellist {
  color: black; }

i.icon-bebo, i.icon-bebo-sign {
  color: #ee1010; }

i.icon-behance-sign, i.icon-behance {
  color: #005cff; }

i.icon-bread-sign, i.icon-bread {
  color: #00a4e4; }

i.icon-digg-sign, i.icon-digg {
  color: #065796; }

i.icon-disqus-sign, i.icon-disqus {
  color: #2e9fff; }

i.icon-dropbox-sign, i.icon-dropbox {
  color: #007ee5; }

i.icon-dribbble-sign, i.icon-dribbble {
  color: #ea4c89; }

i.icon-facebook-sign, i.icon-facebook {
  color: #3b5998; }

i.icon-flickr-sign, i.icon-flickr {
  color: #ed1e83; }

i.icon-foursquare, i.icon-foursquare-sign {
  color: #0cbadf; }

i.icon-github-sign, i.icon-github {
  color: black; }

i.icon-goodreads-sign, i.icon-goodreads {
  color: #5a471c; }

i.icon-googleplus-sign, i.icon-googleplus {
  color: #303030; }

i.icon-instagram-sign, i.icon-instagram {
  color: #3f729b; }

i.icon-klout-sign, i.icon-klout {
  color: #e24a25; }

i.icon-lastfm-sign, i.icon-lastfm {
  color: #a52f23; }

i.icon-linkedin-sign, i.icon-linkedin {
  color: #4875b4; }

i.icon-medium-sign, i.icon-medium {
  color: black; }

i.icon-meetup-sign, i.icon-meetup {
  color: #dd3333; }

i.icon-pinterest-sign, i.icon-pinterest {
  color: #cb2027; }

i.icon-pocket-sign, i.icon-pocket {
  color: #ee3f53; }

i.icon-quora-sign, i.icon-quora {
  color: #a72822; }

i.icon-reddit-sign, i.icon-reddit {
  color: #638cb1; }

i.icon-soundcloud-sign, i.icon-soundcloud {
  color: #ef3b24; }

i.icon-spotify-sign, i.icon-spotify {
  color: #75c044; }

i.icon-stumbleupon-sign, i.icon-stumbleupon {
  color: #e84c24; }

i.icon-techendo-sign, i.icon-techendo {
  color: #32363c; }

i.icon-tumblr-sign, i.icon-tumblr {
  color: #45556b; }

i.icon-twitter-sign, i.icon-twitter {
  color: #33ccff; }

i.icon-vevo, i.icon-vevo-sign {
  color: #dc2726; }

i.icon-vimeo, i.icon-vimeo-sign {
  color: #1fb7ea; }

i.icon-wordpress, i.icon-wordpress-sign {
  color: #464342; }

i.icon-yahoo-sign, i.icon-yahoo {
  color: #400090; }

i.icon-yelp-sign, i.icon-yelp {
  color: #ca3c27; }

i.icon-youtube-sign, i.icon-youtube {
  color: #eb2629; }

And here is what I put in the Customize > Custom > EDIT GLOBAL CSS…


/* Socialicious Font */
@font-face {
    font-family: 'socialicious' !important; 
    src: url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.eot');
    src: url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.eot?#iefix') format('embedded-opentype'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.woff') format('woff'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.ttf') format('truetype'),
         url('http://dev.emilycolin.com/wp-content/themes/x-child/font/socialicious/socialicious.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

I placed all the fonts at this path…

/public_html/dev/wp-content/themes/x-child/font/socialicious (this is the sub-domain for emilycolin.com).

If everything there looks correct, I would have to say, this will not work.

June 16, 2016 at 9:04 am #1045210

Paul R

Moderator

Hi,

Please remove this code in your child theme’s style.css



@font-face {
  font-family: "Socialicious";
  src: url("../font/socialicious.eot");
  src: url("../font/socialicious.eot?#iefix") format("embedded-opentype"), url("../font/socialicious.ttf") format("truetype"), url("../font/socialicious.svg#socialicious") format("svg"), url("../font/socialicious.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

Hope that helps.

June 16, 2016 at 9:54 am #1045281

wnhorne246

Participant

I’ve removed the instructed lines from the style.css. Think I may be calling this all wrong though. Not sure how CSS works that well.

On the home page at http://dev.emilycolin.com/ in the top of the right side bar I have placed the following code under the “Follow Me” heading.

<div class="section group">
	<div class="col span_1_of_5">
		<a href="https://www.facebook.com/emily.colin.79" target="_blank">[icon type="facebook-square" style="font-size: 50px; color: #3b5998; line-height: 0;"]</a>
	</div>
	<div class="col span_1_of_5">
		<a href="https://twitter.com/emilyacolin" target="_blank">[icon type="twitter-square" style="font-size: 50px; color: #00aced; line-height: 0;"]</a>
	</div>
	<div class="col span_1_of_5">
		<a href="https://www.instagram.com/emily_colin/" target="_blank">[icon type="instagram" style="font-size: 50px; color: #e95950; line-height: 0;"]</a>
	</div>
	<div class="col span_1_of_5">
		<a href="http://dev.emilycolin.com/feed/" target="_blank">[icon type="rss-square" style="font-size: 50px; color: #fb8f3d; line-height: 0;"]</a>
	</div>
	<div class="col span_1_of_5">
		<a href="https://www.goodreads.com/book/show/13535473-the-memory-thief" target="_blank"><i class="icon-goodreads-sign" style="font-size: 50px; line-height: 0;"></i></a>
	</div>
</div>

The Goodreads font is the last one on the right.

And I placed this CSS in that pages “Setting > Custom CSS” tab.

.x-raw-content .col.span_1_of_5 a i {
	font-family: socialicious;
}

I’m pretty sure I screwed that one up because now all the icons have gone batty.

Here’s hoping it’s something simple.

June 16, 2016 at 9:57 am #1045288

wnhorne246

Participant

Another thing to add is, on my iPad I can now see the Goodreads icon, but none of the rest in that sidebar.

Author

Posts

1 2 →