Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 11, 2014 at 5:40 pm #302757
    IndikatorDesign

    Hey there!

    How it is possible to insert a special icon from fontello-icons in a link like this please?

    <a href='#next-section' title='' class='scroll-down-link' data-av_icon="" data-av_iconfont="entypo-fontello" title="Nächste Sektion"></a>

    I see it often in forum that there is the shown square, but what exactly does this mean?

    Cheers!

    Bruno

    August 11, 2014 at 10:44 pm #302887
    mw75

    Hi Bruno,

    thanks for posting this!

    Meanwhile I did some research and figured it out.
    I’ll explain the procedure for everyone in the forum.. so do not wonder about the redundant parts…

    Go to fontello.com and choose the fonts you want to use in your project (these can be from different series on the fontello site as far as I understood it)

    After your marked them watch this video: http://vimeo.com/75743285
    It explains how you can import fontello web fonts into enfold.
    As the fontello download function seems to have changed a little meanwhile you will have to zip-compress the complete folder after downloading the webfonts.

    Now you should have all the fonts you want to use in your zip file.
    Go to the Enfold Theme Options within WordPress and choose the Import/Export-Tab.
    Via the Icon-FontManager import the zip file you just created.

    Now Enfold knows how to decode your chosen web fonts.

    If you want to use a down arrow for example at the end of a section to have a smooth down scrolling effect, put a code element from avia somewhere on the page.

    Now put this line into it:
    <a href='#next-section' title=''" class='scroll-down-link' data-av_icon='' data-av_iconfont="fontello" title="Nächste Sektion"></a>

    Two things to take care of here:
    data-av_icon and data-av_iconfont

    So lets start with data-av_iconfont:
    This is the name of the package as it is stored in the Webfont-Manager.
    If something does not decode correctly have a look into the Webfont-Manager and name it accordingly in your code.

    Now it is time to take care of the weird rectangle in data-av_icon=’’.
    This is where we seem to address the correct font from the stored set in the web font-zip.

    Again go to fontello.com
    With your wanted fonts still chosen click on the “Customize Codes” tab.
    You will see all the chosen fonts.
    They all have this weird little rectangle on top of each.
    Right click on the rectangle, copy it and replace the rectangle seen behind data-av_icon= with the copied one.
    Looks the same-but seems to be a different unicode character.

    Now save.

    Save/Update the page.

    Reload website.

    Hope it worked for your too!

    Cheers
    Marc

    • This reply was modified 10 years, 2 months ago by mw75.
    August 13, 2014 at 3:15 am #303552
    Josue

    Hey Bruno!

    Try adding this at the very end of your theme functions.php file:

    add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);

function avia_replace_standard_icon($icons)
{
$icons['scrolldown']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
return $icons;
}

    Change “ue915” by the icon code of your preference (to check the codes put an icon element on a separate page and hover over them to see the codes).

    Cheers!
    Josue

    August 13, 2014 at 6:56 am #303665
    IndikatorDesign

    Hey Marc and Josue,

    thanks for this reply. Now the mystery is unlocked : )

    Please close the topic..

    Cheers

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Fontello Icon in a Link’ is closed to new replies.