Css иконка в круге

Как сделать круг с помощью CSS3 вокруг иконки font-awesome?

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

4 ответа

Если вы хотите сделать его отзывчивым, то вам не следует использовать этот border-radius: 60px или что-то еще, для круга, border-radius: 50% работает идеально

Теперь, чтобы придать вашим иконкам Font-Awesome эффект круглого фона, вы можете решить это следующим образом:

Но проблема здесь в том, что значки с потрясающим шрифтом не имеют одинаковой ширины или высоты, поэтому у вас может быть проблема с перекошенным кругом (форма эллипса)

Чтобы предотвратить это, вы можете исправить это, например:

Затем, используя медиа-запрос, вы можете изменить эти свойства для разных разрешений экрана.

Да, форма эллипса очень проблематична, поэтому вы говорите, что фиксированная ширина должна быть указана для каждого значка, и нет «уловить все».

Да, нет способа сделать «глобальное» решение с радиусом границы для разных размеров значков (например, 20 пикселей, 30 пикселей, 40 пикселей и т. д.). Это связано с тем, как работает border-radius (это граница только со скругленными углами). Чтобы сделать его круглым, вы должны сделать элемент квадратным, а глобального способа сделать элементы квадратными не существует. Вы должны указать ширину и высоту или использовать некоторые хаки, например: установить высоту строки так же, как ширина и т. д. Но есть и другой способ добавить значок круга и создать стиль перед использованием этого значка и переместить его на значок, используя положение абсолютный. это не красиво, но это будет работать.

Один из вариантов — не пытаться сопоставить отступы / границы / фон и т. Д. По размеру самого значка. Изолируя их, вы можете отдельно управлять размером шрифта значка для адаптивных целей вместе с круглым внешним видом фона.

/* Remove default list styling */ ul < margin: 0; list-style: none; padding: 0; >.list <> .list__item < display: inline-block; >.list__icon < display: inline-block; vertical-align: middle; position: relative; >.list__icon_social < text-align: center; border-radius: 50%; background-color: #0066FF; color: #fff; padding: 3rem; font-size: 2rem; >.icon_social

Другой вариант — иметь 2 отдельных слоя; один для круга, а другой для шрифта, который вы хотите использовать. Вот код:

Также здесь находится jsfiddle, но, очевидно, классные шрифты там не работают. Кстати, это не отзывчивое решение.

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

Источник

Как сверстать круглый блок с иконками внутри?

Подскажите, пожалуйста, как сверстать такое расположение иконок?
Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены кликабельные иконки. У меня вообще нет идей.

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

@МаксимЛенский а разве это по тому же принципу сделать нельзя? Если это что-то вроде навигации (кликаешь на название логотипа и т.д.), если же нет и это просто статичные блоки или вообще это что-то вроде картинки, хм. тогда да, вы правы. Круги нарисовать это ж не сложно. Я увидев эту картинку, понял что это что-то более объемное, надеюсь я не ошибся )

@МаксимЛенский вы меня не совсем поняли. Я уже больше о их поведении говорю (в последствии), и когда вам пишу это подразумеваю. А если уж просто круги, так тут лучше SVG, но вижу что вы уже и сами добавили это. И я написал вроде вначале, что вариантов реализации несколько.

@VladSpirin про поведение если не ошибаюсь автор не спрашивал . если кто то раньше не добавит вариант с svg я сделаю . завтра, если честно вопрос не из лёгких и достоин Полезного вопроса ..

3 ответа 3

Добавляю новый ответ, так как приложение почти полностью переписано и не знаю какое решение больше устроит автора.

• Все изменяемые параметры переведены в проценты для достижения полной адаптивности.
• Блок окружностей, который обеспечивает круглую основу иконки с тенью переведен в секцию для многократного использования с помощью команды
• Упрощена формула фильтра, который размывает тень
• Убраны фиксированные значения width и height из шапки SVG для получения адаптивности
• svg код обернут в , что позволит менять размеры svg блока, меняя проценты ширины и высоты родительского .
• Добавлены ссылки на каждую иконку
• Иконки распределены по всей ширине svg блока

Для настройки размера и интенсивности тени увеличивайте или уменьшайте радиусы двух окружностей относительно друг друга. Так же для этих целей, можно изменять атрибут stdDeviation=»4″ фильтра

Источник

Как установить иконку или цифры в центре круга, HTML&CSS

В верстке очень часто нужно установить какие либо элементы внутри других, например, иконки социальных сетей в круге или номера страниц в разделе пагинации. Все это можно сделать только с помощью HTML и CSS.
Здесь мы приведем два способа, как можно реализовать данный элемент верстки.

Первый способ

Логика
Сначала создаем родительский блок нужной ширины и задаем ему относительное позиционирование.
Затем внутри родительского блока создаем дочерний и указываем ему абсолютное позиционирование и центрируем его относительно родительского блока.

Настройка
Родительскому блоку указываем размер шрифта в пикселях, а ширину и высоту в em . Это нужно для того, чтобы при изменении размера шрифта, размер родительского блока увеличивался пропорционально со всех сторон, по ширине и высоте.
Дочернему блоку при необходимости указываем цвет элементов.
Все остальные настройки являются произвольными на ваше усмотрение.

Первый способ

Второй способ

Кроме иконок внутри круга можно добавить цифры, например для меню пагинации. Сделать это можно и первым способом, все будет отлично работать. Но так как все шрифты одного набора имеют одинаковые пропорции, то можно воспользоваться и другим вариантом.

Логика
Создаем ссылку с классом, например page-numbers и этому классу назначаем нужные нам атрибуты, чтобы все выглядело красиво и ровно.

Настройка
Также, как и в первом случае указываем классу размер шрифта в пикселях, а ширину и высоту в em .
Затем указываем ему цвет фона и цвет текста, который нам нужен и другие атрибуты, которые будут нужны, чтобы добиться нужного нам внешнего вида данного элемента.
Центрирование элементов происходит за счет выравнивания текста по центру и подбора высоты между строками.

Источник

Make Font Awesome icons in a circle?

I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:

Is it possible to all icon always be in round circle with border? Something like this, I have a picture: Using

Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?

15 Answers 15

With Font Awesome you can easily use stacked icons like this:

UPDATE: Font Awesome v5.15.4

wish this was the accepted answer, its the «correct» way to do this with fontawesome. Accepted answer is a hack that does not adjust well.

@emrah — its the only option here that is truely fontawesome, not custom css, so its more precise then anything here.

JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/

The border-radius should round the element. What brower do you use? will updated my answer with prefixes

But this is not a solution. This only works if the i has content. Usually with FA you don’t have content within the i-tag, but the icon is rendered by CSS later: and this is what @Schneider actually asked for.

@Jan I will investigate in that tomorrow. But i can not see a Problem. You are Right, that the tags don’t have content, but the content will be added via css. Even when the Icon would fail to load, you would see an circle. Can you make a jsFiddle of a Problem you see with the answer?

No. This is the answer to the question. See the images of the question. There is a shadow, not a hard circle.

You don’t need css or html tricks for it. Font Awesome has built in class for it — fa-circle To stack multiple icons together you can use fa-stack class on the parent div

//And we have now facebook icon inside circle:)

Sampat Badhe has told in his answer the same more than 2 years ago. Why dont you read other answers before writing yours?

hey, sorry for Sampat, i didn’t see him answer, i’ll try to modify my answer and add more solutions or helpful info.

Font icon in a circle using em as the base measurement

if you use ems for the measurements, including line-height , font-size and border-radius , with text-align: center it makes things pretty solid:

Update: Rather use flex.

If you want precision this is the way to go.

.sosial-links a < display: block; float: left; width: 36px; height: 36px; border: 2px solid #909090; border-radius: 20px; margin-right: 7px; /*space between*/ >.sosial-links a i

NOTE: Don’t use this anymore. Use flexbox.

You can also do this. I wanted to add a circle around my icomoon icons. Here is the code.

Upon learning flex recently, there is a cleaner way (no tables and less css). Set the wrapper as display: flex; and to center it’s children give it the properties align-items: center; for (vertical) and justify-content: center; (horizontal) centering.

Strange that nobody suggested this before.. I always use tables to do this.
Simply make a wrapper have display: table and center stuff inside it with text-align: center for horizontal and vertical-align: middle for vertical alignment.

Источник