Jump to content
  • 0

Как прикрутить иконки к адаптивному сайту


virtas
 Share

Question

Скажите я новичок пытаюсь перекрутить иконки к сайту номеру тел скайпу иконки 
http://seoisra.hostenko.com/
Ну и при изменении экрана они гуляют на нужно что бы возле номера были с лева.
Только я не пойму , мне нужно медиа запросами подгонять , прописывать каждое значение для разных экранов ? не могу сообразить как через bootstrap все наладить.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

пора бутстрап законодательно запрещать для тех, кто не понимает css.

 

Как-нибудь на досуге объясните, пожалуйста, смысл размещения .container внутри .container-fluid. Но это так, лирика.

 

У вас иконки прилажены к элементу раскладки слева, а текст в нём болтается справа. Вы так написали, так и работает.

  • Like 1
Link to comment
Share on other sites

  • 0

пора бутстрап законодательно запрещать для тех, кто не понимает css.

 

Как-нибудь на досуге объясните, пожалуйста, смысл размещения .container внутри .container-fluid. Но это так, лирика.

 

У вас иконки прилажены к элементу раскладки слева, а текст в нём болтается справа. Вы так написали, так и работает.

На одних экранах текст с права на меньших по центру ! вот и мне нужно что бы иконки сугубо плавали за текстом

Link to comment
Share on other sites

  • 0

вам будет правильно иконки сделать инлайновыми. Тогда они будут подчиняться тем же правилам, что и текст.

Спасибо за критику все учту.

Сделал списка с маркером изображением.

.nomera3 ul { 
list-style-image: url("./img/nomera3.png");
list-style-position: inside; 
}
Link to comment
Share on other sites

  • 0

вам будет правильно иконки сделать инлайновыми. Тогда они будут подчиняться тем же правилам, что и текст.

а подскажите как сделать иконки  инлайновыми, ато получается я их теперь не могу по вертикали по центру поставить ((( 

Link to comment
Share on other sites

  • 0

ну смотрите. Вы используете бутстрап. Посмотрите, как делаются иконки там: http://getbootstrap.com/components/#glyphicons

У вас, конечно, свои собственные. Но принцип-то никто не отемнял. Делаете картинку, ставите её в строку, выравниваете вертикально, а горизонтально она сама встанет куда сказано.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By karakymg
      Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция
      <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) и квадратные при условии что их может быть больше или меньше чем сейчас.
    • By Марат
      Здравствуйте!
       
      Надо сделать иконки рубрикам блога 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; 

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

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

      Задача: сгенерировать иконочный шрифт из макета, который нам отдали в 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 и генерим шрифт

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

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy