Pages

Frequently Asked Questions

[How-To] Custom Page Link Icons

Whether you want a more personalised look or need icons that will work with each of your installed styles' color palettes, it's easy to add your own unique custom page link icons.

page_icons.jpg
Route field example
page_icons.jpg (17.53 KiB) Viewed 2451 times

Easy: Just add an icon
To get started, your custom icons must follow a specific naming structure of the form: pages_route.gif wherein route must match the "Page URL route" defined for the page that will be using the icon. For example, a page with the URL route foobar would use the icon pages_foobar.gif.

route_field.png
About Us page link with custom icon

The image must also be a GIF.

The custom icons should be kept in phpBB's style/*/theme/images directories, for example: phpBB/styles/prosilver/theme/images/pages_foobar.gif. You should add your custom icon to every style installed on your board (you can design different icons for each style if necessary). If Pages can't find an icon it will fallback to its default icon.

You may need to purge the icon cache to see any changes take effect. This can be done from the Manage Pages ACP page.

We recommend keeping custom icons stored in phpBB's style directories rather than in the Pages extension's style directories, as this prevents accidental deletion of your custom files whenever the Pages extension is updated.

Advanced: Tweak CSS for greater control and customisability
Alternatively, style authors and other experienced users that don't want to use individual GIF files for icons can use the CSS classes which are added to the page links automatically. These classes allow you to change the styling of the link (including icons) using CSS. These classes follow a naming structure of the form: icon-page-route wherein route is the name of the "Page URL route" defined for the page that will be using the class.

For example, to display a Font Awesome icon for a page with the route foobar, the following CSS would be added to any available CSS file, e.g.: prosilver/theme/stylesheet.css:

CODE: Select all

/* remove default icon styling */
.icon-page-foobar { background: none !important }

/* remove default icon styling */
.icon-page-foobar > a { padding: 0 }

/* apply font icon styling */
.icon-page-foobar > a:before {
    content: "\f086"; /*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    width: 1.28571429em;
    text-align: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 2px;
}