Перейти к содержанию

Подключение FontAwesome к главному меню


Kinkl

Рекомендуемые сообщения

Здравствуйте! Сейчас в главном меню у меня иконки-картинки, смотрится очень убого. Хочу заменить на FontAwesome. Подскажите, как правильно подключить его к главному меню. Не получается правильно составить код для привязки отдельной иконки к каждому приложению. Стандартный код с картинками в меню выглядит так:

#primary_nav img.navIcon {
		width: 16px;
		height: 16px;
		margin-bottom: 7px;

		background: url("{style_images_url}/_custom/icon_primary_portal.png") no-repeat 0 0;
	}

		#primary_nav a:hover img.navIcon {
			opacity: 1;
		}

		#primary_nav a:active img.navIcon {
			opacity: 0.4;
		}
		
	#primary_nav li.active a img.navIcon {
		opacity: 1;
	}
	
	#primary_nav #nav_home a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_home.png");}
	#primary_nav #nav_app_forums a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_forums.png");}
	#primary_nav #nav_app_members a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_members.png");}
	#primary_nav #nav_app_ccs a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_ccs.png");}
	#primary_nav #nav_app_downloads a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_ccs.png");}
	#primary_nav #nav_app_blog a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_blog.png");}
	#primary_nav #nav_app_ipchat a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_ipchat.png");}
	#primary_nav #nav_app_calendar a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_calendar.png");}
	#primary_nav #nav_app_nexus a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_nexus.png");}
	#primary_nav #nav_app_gallery a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_gallery.png");}
	#primary_nav #nav_other_apps a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_more.png");}
	#primary_nav #nav_more a img.navIcon{ background-image: url("{style_images_url}/_custom/icon_primary_more.png");}
Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...