Home Icon In Menu And In Breadcrumbs

Hi guys

one quickfro the road.

There are many times you need to have a home icon instead of the word home in breadcrumbs.

Its not so hard to make it happen, and also maintain the link to homepage

Just add to your custom css field in Visual editor following lines

.ty-breadcrumbs__a:first-child::after {
    content: "\f015";
    font-family: Fontawesome;
    font-size: 20px;
    height: 100%;
    position: absolute;
    right: -9999px;
    text-align: center;
    width: 100%;
}
.ty-breadcrumbs__a:first-child {
    display: inline-block;
    height: 100%;
    line-height: 12px;
    position: relative;
    right: 9999px;
}

You need also to load the font awsome library in order to use the home icon

You can do this by adding to your theme (for example responsive) a new file

responsive / templates / addons / footer_extra / hooks / index / meta.post.tpl

and inside meta.post.tpl add



Now if you went so far you can also add a home icon in the menu before any item that will also get you to home page

Just add to your theme (for example responsive) a new file

responsive / templates / addons / extra_headers / hooks / blocks / topmenu_dropdown_top_menu.pre.tpl

and inside the file topmenu_dropdown_top_menu.pre.tpl add those lines

  • You also need to add a few css lines again to your custom css field in Visual editor

    .ty-menu__homeicon::before {
        content: "\f015";
       font-family: Fontawesome;
        font-size: 22px;
        font-style: normal;
        text-transform: none;
    }

    Thats it!

    And this is the result

    [attachment=11290:bread-home.jpg]

    Enjoy

    Fotis

    bread-home.jpg