Report

Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция
<div class="block"> <a href="#"><i class="vk"></i></a> <a href="#"><i class="ok"></i></a> <a href="#"><i class="gp"></i></a> <a href="#"><i class="fb"></i></a> <a href="#"><i class="in"></i></a> <a href="#" class="fullwidth">Link</a> </div> элемент с классом fullwidth всегда по ширине в 100%
нужно сделать что бы вс элементы без этого класса были inline-block (аля only vertical) и квадратные при условии что их может быть больше или меньше чем сейчас.

Здравствуйте!
 
Надо сделать иконки рубрикам блога free-pc.ru в сайдбаре с помощью шрифта: Fontawesome.
 

 
Для этого хочу прописать определенную иконку шрифта определенной рубрике через CSS.
 
Но не могу определить какой класс отвечает за определенный пункт рубрики (использую Firebug для Firefox)
 
Вроде понял что это class="cat-item cat-item-55">
 
Прописываю в CSS вот такой код:
 
.cat-item cat-item-55:before {        font-family: FontAwesome;        content: "\f07c";        color:#ff0000; 
} 
Не работает!
 
Помогите пожалуйста.
 
Спасибо!
 

Прикинул как лучше вопросы задавать... попробую все в одной теме.  Будут рассмотрены следующие темы:meta_name="viewport"  во всей красе media запросы - взгляд изнутри особенности мобильных браузеров - как происходит обработка-подстройка кода странички под реальный экран мобильника шрифт - как подстраиваться под размер экрана мобильных браузеров фотографии - легкие но не мелкие, с видом на будущее, retina-дисплей, IE хаки Иконка сайта
Обо мнеВерстальщик-любитель. Знания - только HTML и  CSS.о PHP знаю только что собирается из отдельных кусков кода. Сервисных технологий и терминов не понимаю.По теме адаптивной верстки прочитал довольно много. Другими словами базовые знания есть. Сейчас изучаю коды реальных сайтов и вижу много непонятного.   Прошу помочь мне разобраться.   Моя цель Сделать адаптивный сайт на чистом HTML и CSS, Яваскрипт собираюсь использовать только в крайнем случае (например для меню).Сайт будет без движка.   Интересуют следующие основные моменты:сайт легко сверстать вручную сайт должен быстро загружаться сайт должен быть хорошим с точки зрения SEO  Общий подходСайт далать - так делать с видом на будущее!  чтобы не пришлось через пару лет переделывать.

Небольшое предисловие:

В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали...

Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD.
Что нам понадобится:

1) Photoshop (думаю версия не имеет значения, например у меня CS5)
2) Inkscape (опенсорсный векторный редактор)
3) Любой текстовый редактор (у меня Sublime Text 2)
4) https://cloudconvert.org - сайт, который умеет конвертировать файлы в SVG
5) https://icomoon.io - генератор иконочных шрифтов

Шаг первый:
в макете находим нужную иконку, она должна быть векторная (т.е. это должен быть Shape), если иконка растровая, то её нужно конвертировать в вектор
 

после этого нужно обрезать макет по размеру иконки (Crop Tool)

Шаг второй:
нужно убрать все слои, кроме необходимого нам (того, что с иконкой), для этого создаём новый файл (File -> New) и перетаскиваем в него нужный нам слой из макета, после этого сохраняем файл (File -> Save As), в появившемся меню выбираем формат .eps (Encapsulated PostScript)

Шаг третий:
лезем на сайт CloudConvert выбираем наш .eps-файл и конвертируем его в .svg, далее нужно очистить его от всего говна, которое образовалось там после конвертации

Шаг четвертый:
открываем получившийся .svg в любимом текстовом редакторе, ищем там тег <path />, кроме этого тега нам больше ничего не понадобится, всё остальное можно смело стирать, из самого тега <path /> удаляем все атрибуты, кроме d="" (там собственно путь) и стиля clip-rule (он отвечает за "дырки" внутри иконки).

Шаг пятый:
ручками делаем новый чистенький SVG
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" version="1.1"> <path style="clip-rule: evenodd;" d="<!-- тут собственно путь -->" /></svg>Шаг шестой (возможно необязательный):
у меня после конвертации иконка получилась кверху ногами, да ещё и 15px превратились в 150px (т.е. размер увеличился в 10 раз), хз почему так. но чтобы это пофиксить нам понадобится Inkscape, создаём там файл нужного размера (например 32х32 - я обычно этот размер для шрифтов юзаю), загружаем туда наш .svg и отражаем его по вертикали и подгоняем под нужный размер, затем сохраняем как SVG (Inkscape опять надобавляет в код своего говна типа метаданных и прочей лабуды, по желанию вычищаем всё это оттуда)

Шаг седьмой:
лезем на сайт IcoMoon и генерим шрифт

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

Ребят здравствуйте подскажите пожалуйста
Проблема с иконками в списках,
Есть такое меню

 
Проблема в том что при наведении на пункт иконки должны менять цвет, подскажите как сделать просто вставить иконки у меня получилось но нужно что бы при наведении они меняли цвет (сами иконки спрайтом)
Как вообще такое реализовать, может кто сталкивался и нашел решение, пробовал искать в google но нормального решения так и не нашел