OcStore 2.1 (OpenCart 2.1) добавляем иконки в личный кабинет. Иконки opencart

Opencart 2 - Добавляем Иконки В Личный Кабинет | Модули, Шаблоны, Движки

Всем привет, в этой статье мы с вами немного украсим личный кабинет (модуль) – добавим всем пунктам подходящие иконки, а то просто ссылки выглядят скучновато.

Список задач на сегодня:

Вставим иконки (с помощью иконочного шрифта Font-Awesome который уже подключен к стандартному шаблону OcStore / OpenCart) в модуль личный кабинет

Приступим:

Откроем файл ../catalog/view/theme/default/template/module/account.tpl и вместо этих строк (1-13):

Код:

<div> <?php if (!$logged) { ?> <a href="<?php echo $login; ?>"><?php echo $text_login; ?></a> <a href="<?php echo $register; ?>"><?php echo $text_register; ?></a> <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a> <?php } ?> <a href="<?php echo $account; ?>"><?php echo $text_account; ?></a> <?php if ($logged) { ?> <a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a> <a href="<?php echo $password; ?>"><?php echo $text_password; ?></a> <?php } ?> <a href="<?php echo $address; ?>"><?php echo $text_address; ?></a> <a href="<?php echo $order; ?>"><?php echo $text_order; ?></a> <a href="<?php echo $download; ?>"><?php echo $text_download; ?></a><a href="<?php echo $recurring; ?>"><?php echo $text_recurring; ?></a> <a href="<?php echo $reward; ?>"><?php echo $text_reward; ?></a> <a href="<?php echo $return; ?>"><?php echo $text_return; ?></a> <a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a> <a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a> <?php if ($logged) { ?> <a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a> <?php } ?> </div> вставим эти:

Код:

<div> <h4><?php echo $heading_title; ?></h4> <?php if (!$logged) { ?> <a href="<?php echo $login; ?>"><?php echo $text_login; ?></a> <a href="<?php echo $register; ?>"><?php echo $text_register; ?></a> <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a> <?php } ?> <a href="<?php echo $account; ?>"><?php echo $text_account; ?></a> <?php if ($logged) { ?> <a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a> <a href="<?php echo $password; ?>"><?php echo $text_password; ?></a> <?php } ?> <a href="<?php echo $address; ?>"><?php echo $text_address; ?></a> <a href="<?php echo $order; ?>"><?php echo $text_order; ?></a> <a href="<?php echo $download; ?>"><?php echo $text_download; ?></a> <a href="<?php echo $recurring; ?>"><?php echo $text_recurring; ?></a> <a href="<?php echo $reward; ?>"><?php echo $text_reward; ?></a> <a href="<?php echo $return; ?>"><?php echo $text_return; ?></a> <a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a> <a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a> <?php if ($logged) { ?> <a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a> <?php } ?> </div> (мы добавили заголовок модулю и разбили ссылки построчно – так вам работать будет удобнее)

Теперь добавим всем ссылкам и заголовку иконки, меняем код на этот:

Код:

<div> <h4><i></i> <?php echo $heading_title; ?></h4> <?php if (!$logged) { ?> <a href="<?php echo $login; ?>"><i></i> <?php echo $text_login; ?></a> <a href="<?php echo $register; ?>"><i></i> <?php echo $text_register; ?></a> <a href="<?php echo $forgotten; ?>"><i></i> <?php echo $text_forgotten; ?></a> <?php } ?> <a href="<?php echo $account; ?>"><i></i> <?php echo $text_account; ?></a> <?php if ($logged) { ?> <a href="<?php echo $edit; ?>"><i></i> <?php echo $text_edit; ?></a> <a href="<?php echo $password; ?>"><i></i> <?php echo $text_password; ?></a> <?php } ?> <a href="<?php echo $address; ?>"><i></i> <?php echo $text_address; ?></a> <a href="<?php echo $order; ?>"><i></i> <?php echo $text_order; ?></a> <a href="<?php echo $download; ?>"><i></i> <?php echo $text_download; ?></a> <a href="<?php echo $recurring; ?>"><i></i> <?php echo $text_recurring; ?></a> <a href="<?php echo $reward; ?>"><i></i> <?php echo $text_reward; ?></a> <a href="<?php echo $return; ?>"><i></i> <?php echo $text_return; ?></a> <a href="<?php echo $transaction; ?>"><i></i> <?php echo $text_transaction; ?></a> <a href="<?php echo $newsletter; ?>"><i></i> <?php echo $text_newsletter; ?></a> <?php if ($logged) { ?> <a href="<?php echo $logout; ?>"><i></i> <?php echo $text_logout; ?></a> <?php } ?> </div> (я подобрал иконки на свой вкус, вы можете выбрать другие)

Вставляются иконки просто, смотрите шрифт на оф. сайте — http://fortawesome.github.io/Font-Awesome/icons/ и копируйте код иконки, к примеру:

чтобы не добавлять отступ от иконки к ссылке в стилях, добавьте между кодом иконки и пунктом меню пробел и всё будет отлично смотреться.

Результат наших трудов:

надеюсь статья была вам полезна и интересна.

До новых встреч, следите за нашими новостями.

lowenet.biz

OcStore 2.1 (OpenCart 2.1) добавляем иконки в личный кабинет

Всем привет, в одной из последних статей мы добавляли иконки в модуль личного кабинета, теперь мне пришло на ум добавить иконки на страницу личного кабинета, а то она выглядит довольно скучно.

OpenCart-20

До:

ocstore_account_01

После:

ocstore_account_03 ocstore_account_04

Приступим:

1. Как обычно сначала подберём иконки, в моём случае это:

2. Откроем файл ../catalog/view/theme/default/template/account/account.tpl и вместо этой строки (21):

<ul>

вставим эту:

<ul>

вместо этих строк (22-25):

вставим эти:

вместо этой строки (28):

<ul>

вставим эту:

<ul>

вместо этих строк (29-36):

вставим эти:

мне не нравится что подписка на новости размещена отдельной строкой, давайте добавим её к пунктам личного кабинета, удалим эти строки (38-41):

а после этой строки (25):

вставим эту:

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в конец файла эти строки:

(я сделал довольно крупные иконки (font-size: 40px;), при желании вы можете изменить их размер, да и вообще подкорректировать все стили под себя, в этом нет ничего сложного)

Результат:

ocstore_account_02

При желании добавим иконки заголовкам, вместо этих строк:

20 — <h3><?php echo $text_my_account; ?></h3>

28 — <h3><?php echo $text_my_orders; ?></h3>

вставим эти:

20 — <h3><i></i> <?php echo $text_my_account; ?></h3>

28 — <h3><i></i> <?php echo $text_my_orders; ?></h3>

и дополним стили этими строками:

h3 .fa {font-size: 26px;padding-left: 8px;}

Результат:

ocstore_account_03

Если вам не нравится что синие иконки и надписи бросаются в глаза, подкорректируем наши стили, вместо этих строк:

/* account page */#my_account > li {vertical-align: top;display: inline-block;border: 1px solid #ddd;padding: 10px;margin: 5px;border-radius: 3px;width: 120px;min-height: 115px;text-align: center;}#my_account > li:hover {border: 1px solid #337AB7;}#my_account .fa {font-size: 50px;display: block;text-align: center;}h3 .fa {font-size: 26px;padding-left: 8px;}

вставим эти:

/* account page */#my_account > li {vertical-align: top;display: inline-block;border: 1px solid #ddd;padding: 10px;margin: 5px;border-radius: 3px;width: 120px;min-height: 115px;text-align: center;}#my_account > li:hover {border: 1px solid #337AB7;}#my_account > li a {color: #5d5d5d;}#my_account > li:hover > a, #my_account > li:hover .fa {color: #337AB7;}#my_account .fa {font-size: 50px;color: #5d5d5d;display: block;text-align: center;}h3 .fa {font-size: 26px;padding-left: 8px;}

Результат:

ocstore_account_04