Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 trouble with font icons!
#
Heyo! I'm trying to use these font icons that I downloaded and uploaded to my forum, but it's just... not working? I feel like I don't have the codes in the CSS correctly or haven't properly uploaded all of the files necessary.

Basically, I downloaded this icon pack, and used Fontello to make my own icon font. I uploaded all of the font files to my file manager, as well as all of the CSS files. I added the following to my CSS.

CODE
@font-face {
 font-family: 'hp_icons';
 src: url('http://files.jcink.net/uploads/spookymulder/hp_icons.eot');
 src: url('http://files.jcink.net/uploads/spookymulder/hp_icons.eot#iefix') format('embedded-opentype'),
      url('http://files.jcink.net/uploads/spookymulder/hp_icons.woff2') format('woff2'),
      url(http://files.jcink.net/uploads/spookymulder/hp_icons.woff') format('woff'),
      url('http://files.jcink.net/uploads/spookymulder/hp_icons.ttf') format('truetype'),
      url('http://files.jcink.net/uploads/spookymulder/hp_icons.svg#hp_icons') format('svg');
 font-weight: normal;
 font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */

/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
 @font-face {
   font-family: 'hp_icons';
   src: url('http://files.jcink.net/uploads/spookymulder/hp_icons.svg#hp_icons') format('svg');
 }
}
*/

[class^="i-"]:before, [class*=" i-"]:before {
 font-family: "hp_icons";
 font-style: normal;
 font-weight: normal;
 speak: none;

 display: inline-block;
 text-decoration: inherit;
 width: 1em;
 margin-right: .2em;
 text-align: center;
 /* opacity: .8; */

 /* For safety - reset parent styles, that can break glyph codes*/
 font-variant: normal;
 text-transform: none;

 /* fix buttons height, for twitter bootstrap */
 line-height: 1em;

 /* Animation center compensation - margins should be symmetric */
 /* remove if not needed */
 margin-left: .2em;

 /* you can be more comfortable with increased icons size */
 /* font-size: 120%; */

 /* Font smoothing. That was taken from TWBS */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

 /* Uncomment for 3D effect */
 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.i-huffcup:before { content: '\e800'; } /* '' */
.i-toad:before { content: '\e801'; } /* '' */
.i-houseelf:before { content: '\e802'; } /* '' */
.i-deathlyhallows:before { content: '\e803'; } /* '' */
.i-candle:before { content: '\e804'; } /* '' */
.i-sortinghat:before { content: '\e805'; } /* '' */
.i-snitch:before { content: '\e806'; } /* '' */
.i-wingkey:before { content: '\e807'; } /* '' */
.i-patronusstag:before { content: '\e808'; } /* '' */
.i-moon:before { content: '\e809'; } /* '' */
.i-darkmark:before { content: '\e80a'; } /* '' */
.i-quill:before { content: '\e80b'; } /* '' */
.i-cauldron:before { content: '\e80c'; } /* '' */
.i-crest:before { content: '\e80d'; } /* '' */
.i-smallpotion:before { content: '\e80e'; } /* '' */
.i-basilisktooth:before { content: '\e80f'; } /* '' */
.i-wand:before { content: '\e810'; } /* '' */
.i-broom:before { content: '\e811'; } /* '' */
.i-potionflask:before { content: '\e812'; } /* '' */
.i-scar:before { content: '\e813'; } /* '' */
.i-potionbottle:before { content: '\e814'; } /* '' */
.i-daily prophet:before { content: '\e815'; } /* '' */
.i-owlcage:before { content: '\e816'; } /* '' */
.i-face:before { content: '\e817'; } /* '' */
.i-gryffindorsword:before { content: '\e818'; } /* '' */
.i-hogwarts:before { content: '\e819'; } /* '' */
.i-owl:before { content: '\e81a'; } /* '' */
.i-elderwand:before { content: '\e81b'; } /* '' */
.i-triwizardegg:before { content: '\e81c'; } /* '' */
.i-hogwartsexpress:before { content: '\e81d'; } /* '' */
.i-knightbus:before { content: '\e81e'; } /* '' */
.i-maraudersmap:before { content: '\e81f'; } /* '' */
.i-crystalball:before { content: '\e820'; } /* '' */
.i-triwizardcup:before { content: '\e821'; } /* '' */
.i-butterbeer:before { content: '\e822'; } /* '' */
.i-horcrux:before { content: '\e823'; } /* '' */
.i-philospherstone:before { content: '\e824'; } /* '' */
.i-spectrespecs:before { content: '\e825'; } /* '' */
.i-timeturner:before { content: '\e826'; } /* '' */
.i-cloak:before { content: '\e827'; } /* '' */
.i-gargoyle:before { content: '\e828'; } /* '' */
.i-mirrorerised:before { content: '\e829'; } /* '' */
.i-quaffle:before { content: '\e82a'; } /* '' */
.i-howler:before { content: '\e82b'; } /* '' */
.i-teacup:before { content: '\e82c'; } /* '' */
.i-chess:before { content: '\e82d'; } /* '' */
.i-quidditchgoals:before { content: '\e82e'; } /* '' */
.i-wompingwillow:before { content: '\e82f'; } /* '' */
.i-glasses:before { content: '\e830'; } /* '' */
.i-ford:before { content: '\e831'; } /* '' */


I also made sure to add this piece to my wrappers.

CODE
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/hp_icons.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/animation.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/hp_icons_codes.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/hp_icons_embedded.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/hp_icons_ie7.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/spookymulder/hp_icons/hp_icons_ie7_codes.css">


But when I try to use the icons, they don't show up properly. They either show the e82b code or  that symbol. I'm just not sure what I'm doing wrong, so any help at all would be super appreciated. <3 I've done a little searching around on these support forums to try to find some answers, too, but nothing I tried help.

Here's where I'm trying to use them, you can see how the icon isn't working in the userlinks up top.

This post has been edited by spooky mulder: Nov 18 2017, 07:16 PM
PM
#
hey! it's worth giving this a shot in your css instead:

CODE
.i-huffcup:before { content: ''; }
.i-toad:before { content: ''; }
.i-houseelf:before { content: ''; }
.i-deathlyhallows:before { content: ''; }
.i-candle:before { content: ''; }
.i-sortinghat:before { content: ''; }
.i-snitch:before { content: ''; }
.i-wingkey:before { content: ''; }
.i-patronusstag:before { content: ''; }
.i-moon:before { content: ''; }
.i-darkmark:before { content: ''; }
.i-quill:before { content: ''; }
.i-cauldron:before { content: ''; }
.i-crest:before { content: ''; }
.i-smallpotion:before { content: ''; }
.i-basilisktooth:before { content: ''; }
.i-wand:before { content: ''; }
.i-broom:before { content: ''; }
.i-potionflask:before { content: ''; }
.i-scar:before { content: ''; }
.i-potionbottle:before { content: ''; }
.i-daily prophet:before { content: ''; }
.i-owlcage:before { content: ''; }
.i-face:before { content: ''; }
.i-gryffindorsword:before { content: ''; }
.i-hogwarts:before { content: ''; }
.i-owl:before { content: ''; }
.i-elderwand:before { content: ''; }
.i-triwizardegg:before { content: ''; }
.i-hogwartsexpress:before { content: ''; }
.i-knightbus:before { content: ''; }
.i-maraudersmap:before { content: ''; }
.i-crystalball:before { content: ''; }
.i-triwizardcup:before { content: ''; }
.i-butterbeer:before { content: ''; }
.i-horcrux:before { content: ''; }
.i-philospherstone:before { content: ''; }
.i-spectrespecs:before { content: ''; }
.i-timeturner:before { content: ''; }
.i-cloak:before { content: ''; }
.i-gargoyle:before { content: ''; }
.i-mirrorerised:before { content: ''; }
.i-quaffle:before { content: ''; }
.i-howler:before { content: ''; }
.i-teacup:before { content: ''; }
.i-chess:before { content: ''; }
.i-quidditchgoals:before { content: ''; }
.i-wompingwillow:before { content: ''; }
.i-glasses:before { content: ''; }
.i-ford:before { content: ''; }


using the inspect tool and editing .i-howler:before to what's above, it works for me on your site. i can't explain why putting in the actual character in the content area works, but it's fixed this problem for me in the past. hope it resolves this for you too!
#
Thaaat actually makes a lot of sense now that you say it, and it totally worked! I broke something else trying to edit the code (that’s what I get for coding on mobile, I guess), but omg thank you so much, it was driving me nuts. <3
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll