Navigation

Tagged: 

  • Author
    Posts
  • #1238029

    Jade
    Moderator

    Hi EYoael,

    Thanks, I’m able to login to the FTP but I can’t seem to find where you have uploaded the font files.

    Would you mind mentioning which directory you uploaded them in so we could check this further?

    Thank you.

    #1238439

    Eyoael
    Participant

    Hi,

    i uploaded them to the x child, framework, fonts folder.

    Best regards
    Eyoael

    #1238787

    Christopher
    Moderator

    Hi there,

    Please follow our previous replay and add following code in child theme’s style.css file:

    @font-face {
      font-family: 'et-line';
      src: url('http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.eot');
      src: url('http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.eot?#iefix') format('embedded-opentype'),
           url('http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.woff') format('woff'),
           url('http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.ttf')  format('truetype'),
           url('http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.svg#svgFontName') format('svg');
    }
    
    

    You can now insert these icons into any text area such as a post, page, or widget using two different methods.

    <!-- Use the following if you want to use class selectors-->
    <span class="icon-phone"></span>
     
    <!-- Use the following if you want to use data attributes.-->
    <span data-icon="&#xe004"></span>
    

    Upon reviewing whole thread I see you’re trying to embed icon font from here https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

    The tutorial is clear, would you please let us know which part is unclear ?

    Hope it helps.

    #1238835

    Eyoael
    Participant

    Hi,

    The thing is when i try to embed the icons in cornerstone i get a square instead of the actual icon, that has been my problem the whole time. I don’t understand why the icons doesn’t show because they should, i have done all that the tutorial has said and the advice from you guys but the problem still persists.

    Best regards
    Eyoael

    #1238907

    Christopher
    Moderator

    Hi there,

    I was able to fix the issue by updating font path in child theme’s style.css file. Now you should be able to see icons. I added one using inspector to make sure it works, please see the attachment.

    Hope it helps.

    Attachments:
    You must be logged in to view attached files.
    #1238946

    Eyoael
    Participant

    HI,

    Did you use the same span class that is posted above to make this work? Because when i try the span class above i still get the box instead of the icon. I’m sorry about this i’am a beginner at this.

    Best regards
    Eyoael

    #1238955

    Christopher
    Moderator

    Hi there,

    I created a test page (http://www.hopeochlaila.se/?page_id=1015&preview=true) for you.
    Please clear cache and check it.

    Thanks.

    Attachments:
    You must be logged in to view attached files.
    #1238971

    Eyoael
    Participant

    Hi christopher,

    It’s working thank you very much for all your help i really appriciate it.

    Best regards Eyoael

    #1238980

    Christopher
    Moderator

    You’re welcome Eyoael.

    #1325588

    Eyoael
    Participant

    Hi,

    Sorry to reopen this but i’m trying again to embedd custom icons to my site and i’m using the following code to do so:

    @font-face {
    font-family: ‘et-line’;
    src: url(‘http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.eot’);
    src: url(‘http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.woff’) format(‘woff’),
    url(‘http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.ttf’) format(‘truetype’),
    url(‘http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.svg#svgFontName’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    /* Use the following CSS code if you want to use data attributes for inserting your icons */
    [data-icon]:before {
    font-family: ‘et-line’;
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display:inline-block;
    }

    /* Use the following CSS code if you want to have a class per icon */
    /*
    Instead of a list of all class selectors,
    you can use the generic selector below, but it’s slower:
    [class*=”icon-“] {
    */
    .icon-mobile, .icon-laptop, .icon-desktop, .icon-tablet, .icon-phone, .icon-document, .icon-documents, .icon-search, .icon-clipboard, .icon-newspaper, .icon-notebook, .icon-book-open, .icon-browser, .icon-calendar, .icon-presentation, .icon-picture, .icon-pictures, .icon-video, .icon-camera, .icon-printer, .icon-toolbox, .icon-briefcase, .icon-wallet, .icon-gift, .icon-bargraph, .icon-grid, .icon-expand, .icon-focus, .icon-edit, .icon-adjustments, .icon-ribbon, .icon-hourglass, .icon-lock, .icon-megaphone, .icon-shield, .icon-trophy, .icon-flag, .icon-map, .icon-puzzle, .icon-basket, .icon-envelope, .icon-streetsign, .icon-telescope, .icon-gears, .icon-key, .icon-paperclip, .icon-attachment, .icon-pricetags, .icon-lightbulb, .icon-layers, .icon-pencil, .icon-tools, .icon-tools-2, .icon-scissors, .icon-paintbrush, .icon-magnifying-glass, .icon-circle-compass, .icon-linegraph, .icon-mic, .icon-strategy, .icon-beaker, .icon-caution, .icon-recycle, .icon-anchor, .icon-profile-male, .icon-profile-female, .icon-bike, .icon-wine, .icon-hotairballoon, .icon-globe, .icon-genius, .icon-map-pin, .icon-dial, .icon-chat, .icon-heart, .icon-cloud, .icon-upload, .icon-download, .icon-target, .icon-hazardous, .icon-piechart, .icon-speedometer, .icon-global, .icon-compass, .icon-lifesaver, .icon-clock, .icon-aperture, .icon-quote, .icon-scope, .icon-alarmclock, .icon-refresh, .icon-happy, .icon-sad, .icon-facebook, .icon-twitter, .icon-googleplus, .icon-rss, .icon-tumblr, .icon-linkedin, .icon-dribbble {
    font-family: ‘et-line’;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display:inline-block;
    }
    .icon-mobile:before {
    content: “\e000”;
    }
    .icon-laptop:before {
    content: “\e001”;
    }
    .icon-desktop:before {
    content: “\e002”;
    }
    .icon-tablet:before {
    content: “\e003”;
    }
    .icon-phone:before {
    content: “\e004”;
    }
    .icon-document:before {
    content: “\e005”;
    }
    .icon-documents:before {
    content: “\e006”;
    }
    .icon-search:before {
    content: “\e007”;
    }
    .icon-clipboard:before {
    content: “\e008”;
    }
    .icon-newspaper:before {
    content: “\e009”;
    }
    .icon-notebook:before {
    content: “\e00a”;
    }
    .icon-book-open:before {
    content: “\e00b”;
    }
    .icon-browser:before {
    content: “\e00c”;
    }
    .icon-calendar:before {
    content: “\e00d”;
    }
    .icon-presentation:before {
    content: “\e00e”;
    }
    .icon-picture:before {
    content: “\e00f”;
    }
    .icon-pictures:before {
    content: “\e010”;
    }
    .icon-video:before {
    content: “\e011”;
    }
    .icon-camera:before {
    content: “\e012”;
    }
    .icon-printer:before {
    content: “\e013”;
    }
    .icon-toolbox:before {
    content: “\e014”;
    }
    .icon-briefcase:before {
    content: “\e015”;
    }
    .icon-wallet:before {
    content: “\e016”;
    }
    .icon-gift:before {
    content: “\e017”;
    }
    .icon-bargraph:before {
    content: “\e018”;
    }
    .icon-grid:before {
    content: “\e019”;
    }
    .icon-expand:before {
    content: “\e01a”;
    }
    .icon-focus:before {
    content: “\e01b”;
    }
    .icon-edit:before {
    content: “\e01c”;
    }
    .icon-adjustments:before {
    content: “\e01d”;
    }
    .icon-ribbon:before {
    content: “\e01e”;
    }
    .icon-hourglass:before {
    content: “\e01f”;
    }
    .icon-lock:before {
    content: “\e020”;
    }
    .icon-megaphone:before {
    content: “\e021”;
    }
    .icon-shield:before {
    content: “\e022”;
    }
    .icon-trophy:before {
    content: “\e023”;
    }
    .icon-flag:before {
    content: “\e024”;
    }
    .icon-map:before {
    content: “\e025”;
    }
    .icon-puzzle:before {
    content: “\e026”;
    }
    .icon-basket:before {
    content: “\e027”;
    }
    .icon-envelope:before {
    content: “\e028”;
    }
    .icon-streetsign:before {
    content: “\e029”;
    }
    .icon-telescope:before {
    content: “\e02a”;
    }
    .icon-gears:before {
    content: “\e02b”;
    }
    .icon-key:before {
    content: “\e02c”;
    }
    .icon-paperclip:before {
    content: “\e02d”;
    }
    .icon-attachment:before {
    content: “\e02e”;
    }
    .icon-pricetags:before {
    content: “\e02f”;
    }
    .icon-lightbulb:before {
    content: “\e030”;
    }
    .icon-layers:before {
    content: “\e031”;
    }
    .icon-pencil:before {
    content: “\e032”;
    }
    .icon-tools:before {
    content: “\e033”;
    }
    .icon-tools-2:before {
    content: “\e034”;
    }
    .icon-scissors:before {
    content: “\e035”;
    }
    .icon-paintbrush:before {
    content: “\e036”;
    }
    .icon-magnifying-glass:before {
    content: “\e037”;
    }
    .icon-circle-compass:before {
    content: “\e038”;
    }
    .icon-linegraph:before {
    content: “\e039”;
    }
    .icon-mic:before {
    content: “\e03a”;
    }
    .icon-strategy:before {
    content: “\e03b”;
    }
    .icon-beaker:before {
    content: “\e03c”;
    }
    .icon-caution:before {
    content: “\e03d”;
    }
    .icon-recycle:before {
    content: “\e03e”;
    }
    .icon-anchor:before {
    content: “\e03f”;
    }
    .icon-profile-male:before {
    content: “\e040”;
    }
    .icon-profile-female:before {
    content: “\e041”;
    }
    .icon-bike:before {
    content: “\e042”;
    }
    .icon-wine:before {
    content: “\e043”;
    }
    .icon-hotairballoon:before {
    content: “\e044”;
    }
    .icon-globe:before {
    content: “\e045”;
    }
    .icon-genius:before {
    content: “\e046”;
    }
    .icon-map-pin:before {
    content: “\e047”;
    }
    .icon-dial:before {
    content: “\e048”;
    }
    .icon-chat:before {
    content: “\e049”;
    }
    .icon-heart:before {
    content: “\e04a”;
    }
    .icon-cloud:before {
    content: “\e04b”;
    }
    .icon-upload:before {
    content: “\e04c”;
    }
    .icon-download:before {
    content: “\e04d”;
    }
    .icon-target:before {
    content: “\e04e”;
    }
    .icon-hazardous:before {
    content: “\e04f”;
    }
    .icon-piechart:before {
    content: “\e050”;
    }
    .icon-speedometer:before {
    content: “\e051”;
    }
    .icon-global:before {
    content: “\e052”;
    }
    .icon-compass:before {
    content: “\e053”;
    }
    .icon-lifesaver:before {
    content: “\e054”;
    }
    .icon-clock:before {
    content: “\e055”;
    }
    .icon-aperture:before {
    content: “\e056”;
    }
    .icon-quote:before {
    content: “\e057”;
    }
    .icon-scope:before {
    content: “\e058”;
    }
    .icon-alarmclock:before {
    content: “\e059”;
    }
    .icon-refresh:before {
    content: “\e05a”;
    }
    .icon-happy:before {
    content: “\e05b”;
    }
    .icon-sad:before {
    content: “\e05c”;
    }
    .icon-facebook:before {
    content: “\e05d”;
    }
    .icon-twitter:before {
    content: “\e05e”;
    }
    .icon-googleplus:before {
    content: “\e05f”;
    }
    .icon-rss:before {
    content: “\e060”;
    }
    .icon-tumblr:before {
    content: “\e061”;
    }
    .icon-linkedin:before {
    content: “\e062”;
    }
    .icon-dribbble:before {
    content: “\e063”;
    }

    I have placed the fonts in the right child theme folder, but it is not working for me, have i missed something in the code or is it something else?

    Thanks
    Eyoael

    #1325681

    Rupok
    Moderator

    Hi Eyoael,

    I have tried to access the fonts using the link (i.e. http://www.hopeochlaila.se/x-child/framework/fonts/et-line-font/et-line.woff) but they are throwing 404. So either you didn’t place them there or there is is not enough permission set to make it publicly accessible.

    Hope this makes sense.

    #1326884

    Eyoael
    Participant

    Hi,

    Got it. I have now again placed the woff/eot files in my child theme framework folder. And when i use this html <span class=”icon-tools-2″></span> all that appears is a box and not the icon. Is the fonts style css that i posted correctly written or have i donw something wrong when constructing the code?

    Thanks

    #1326904

    Paul R
    Moderator

    Hi,

    Try adding this in custom css

    
    .my-icons {
       font-family: 'et-line';
    }
    

    Then add the class my-icons in all your html icon code

    eg.

    
    <span class="my-icons icon-tools-2"></span>
    

    Hope that helps.

    #1326931

    Eyoael
    Participant
    This reply has been marked as private.
    #1327014

    Paul R
    Moderator

    Hi,

    The path to your font file is still wrong.

    Can you provide us your ftp login in private reply.

    Thanks

Join the conversation

Register or login to your account to reply.

Purchase for access

Buy a copy of X for access to our member center.

Buy