Иконки на сайт png: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

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

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

При правильном использовании значки будут привлекать внимание ваших пользователей, указывать им, куда идти и что делать дальше, а также увеличивать общую привлекательность и UX вашего веб-сайта. Они также могут добавить разнообразия вашим страницам и помочь укрепить сообщения, которые вы хотите передать.

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

Swifticons

Swifticons представляет впечатляющую коллекцию, которая в настоящее время насчитывает 2680 иконок, из которых 1000 иконок можно скачать бесплатно. Элементы делятся на 24 категории и представлены в разных стилях, таких как обведенные, цветные и заполненные.

Есть 4 пакета бесплатных подарков, которые вы можете получить, просто указав свой адрес электронной почты. Два пакета содержат значки из всех категорий, один поставляется с иконками из категории «Мероприятия» в заполненном стиле, а последний выпущенный пакет содержит значки из категории «Гаджеты и технологии» в выделенном стиле.

Иконки доступны в нескольких форматах, таких как SI, SKETCH, PNG, SVG и EPS.

Streamline Icons

Streamline icons – это отличный сайт с более чем 30 тыс. иконок. Коллекция постоянно пополняется новыми иконками, а внимание авторов к деталям впечатляет. Например, многие значки пользователей и профессий имеют женскую, мужскую и гендерно-нейтральную версии.

Вы можете подписаться на бесплатную учетную запись и скачать иконки бесплатно, в виде файлов PNG. Иконки организованы в 53 темах и 720 категориях. Например, если вы выберете тему «Видеоигры», вы увидите, что она содержит несколько категорий, таких как «Известные видеоигры», «Устройства для видеоигр», «Логотип видеоигр» и т. д. Каждый значок доступен в 3 размерах – light, bold и regular.

Tilda Icons

С более чем 700 векторных иконок, упакованных в 43 темах, Tilda Icons является отличным ресурсом для всех креативщиков. Независимо от типа проекта, над которым вы работаете, вы обязательно найдете идеальный набор иконок на этом сайте.

Если вам не хочется просматривать множество тем значков, используйте параметр «Поиск», чтобы найти то, что вам нужно. Вам не нужно регистрироваться на веб-сайте, чтобы загрузить какие-либо значки, но вы должны указать, что значки предоставляются Tilda Publishing, и вставить ссылку на их веб-сайт.

Graphic Burger

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

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

Для загрузки иконок регистрация на сайте не требуется. Вам даже не нужно донатить авторов, но если вы это сделаете, они наверняка оценят это.

Fontisto

Еще один замечательный сайт в моём списке – это Fontisto. Он прекрасно организован, прост в использовании и наполнен великолепными иконками – настоящий праздник для всех креативщиков.

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

Масштабируемые векторы Fontisto могут быть настроены на ваш вкус с помощью CSS, поэтому вы можете изменять их цвет, размер и т. д.

Boxicons

Коллекция иконок на Boxicons в настоящее время насчитывает 1462 предметов. Все иконки доступны в двух стилях – обычный и сплошной. Существует также множество логотипов, которые представляют некоторые известные бренды и социальные медиа-гиганты.

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

Remix Icon

Remix Icons насчитывает более 2000 значков с открытым исходным кодом, которые доступны в выделенных и заполненных стилях.

Элементы организованы в несколько категорий, но вы также можете найти нужный символ по ключевому слову. Как только вы найдете значок, который искали, нажмите на него, чтобы изменить его цвет, выберите формат (SVG или PNG) и установите размер значка. Существует также возможность создать коллекцию ваших любимых значков, которые затем можно экспортировать на ваше устройство.

Ikonate

Загрузите более 320 иконок SVG от Ikonate и измените их на месте, чтобы они соответствовали тону вашего бренда. Измените ширину обводки, размер значка, стиль угла и цвет значка. Когда вы будете довольны тем, как выглядят значки, загрузите столько, сколько хотите, прямо на свой компьютер или телефон.

Iconsuit

Iconscout имеет большое количество иконок – более 114k, если быть точным. Они бывают самых разных стилей: контурный, сплошной, цветной контурный, нарисованный от руки и многие другие. Иконки организованы в наборы, но если вам не нужен весь набор, выберите понравившуюся вам иконку и выберите формат в соответствии с вашими требованиями. Доступные форматы включают PNG, SVG, PDF, EPS, ICO и ICNS. Иконки можно скачать бесплатно, но если вы в конечном итоге будете использовать их в своих проектах, вам придется указать автора.

IcoFont

IcoFont включает в себя коллекцию из более чем 2100 бесплатных иконок, отсортированных по 30 категориям. Иконки охватывают широкий спектр отраслей, поэтому независимо от того, над каким проектом вы работаете, будь то спорт, математика, юриспруденция или погода, IcoFont – это то, что вам нужно.

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

Eva Icons

Скачайте более 480 иконок с открытым исходным кодом от Eva Icons бесплатно. Регистрация не требуется, просто выберите понравившиеся элементы и сохраните их в своей библиотеке, или загрузите все пакеты Eva Icons или NPM.

Все значки полностью адаптивны, поэтому они будут одинаково красиво смотреться как на вашем компьютере, так и на мобильном телефоне. Поддерживаются четыре типа анимации: zoom, pulse, shake и flip. Вы можете выбрать один из двух стилей – заливка и контур, а также несколько форматов, включая PNG, SVG, FONT, SKETCH.

Icons8

Icons8 – превосходный веб-сайт со множеством иконок – 124 700, если быть точным. Они представлены в 32 огромных стилях, так что вам наверняка удастся найти предметы, которые соответствуют вашему вкусу.

Даже если вы полностью удовлетворены тем, как выглядит элемент, вы можете изменить его с помощью редактора Icons8. Измените цвет значка, добавьте наложение, текст и различные эффекты, измените обводку, отступы и многое другое.

Найти правильный значок легко благодаря параметрам фильтрации, расположенным в левой части экрана, но вы также можете просматривать коллекцию по ключевому слову. Веб-сайт поддерживает некоторые из наиболее распространенных форматов, поэтому вы можете получить нужные элементы в форматах PNG, FONT, SVG и PDF. Чтобы использовать иконки из Icons8 бесплатно, вы должны сослаться в своей работе на их сайт.

LineAwesome

Еще один невероятный ресурс, полный многочисленных разнообразных иконок, – это веб-сайт Line Awesome. Иконки здесь представлены в более чем 50 категориях, включая одежду, шахматы, морскую тематику, научную фантастику, спиннеры и многие другие. Вы можете загрузить всю коллекцию в виде файла ZIP или выбрать конкретную иконку, которую хотите использовать. Когда вы увидите значок, который вам нравится, щелкните по нему, выберите размер, а затем просто скопируйте и вставьте значок в свой дизайн.

---

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

Подборка: 10 самых популярных ИИ-генераторов изображений

NightCafe

Это один из самых популярных ИИ-генераторов в мире. Он известен тем, что имеет больше алгоритмов и опций, чем аналоги, при этом чрезвычайно прост для начинающих пользователей. NightCafe основан на системе кредитов, но в нем есть бесплатный уровень с щедрыми условиями. Кроме того, он предлагает разнообразные способы «заработать» эти кредиты, участвуя в жизни сообщества.

Некоторые из самых интересных особенностей NightCafe:

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

DALL-E 2

Позволяет создавать очень реалистичные изображения с помощью ИИ всего за несколько минут.

DALL-E 2 демонстрирует невероятный потенциал. Согласно OpenAI, этот инструмент можно использовать для создания иллюстраций, дизайна продуктов и генерации новых идей для бизнеса.

Простой в использовании интерфейс позволяет любому пользователю создавать высококачественные изображения с помощью ИИ. Это означает, что он будет ценен не только для профессиональных художников, но и для любителей. 

---

Читайте по теме:

Работы DALL-E — искусство или плагиат?

«Сбер» создал нейросеть ruDALL-E, она генерирует картинки по описанию на русском языке 

---

Один из лучших инструментов DALL-E 2 — кисть, которая позволяет добавлять к изображению тени, блики и многие другие детали. Таким образом, можно создавать сложные арты с несколькими слоями, для каждого из которых можно задать уникальные свойства.

Некоторые из самых интересных особенностей DALL-E 2:

• сверхреалистичные изображения за считанные минуты;
• генерация иллюстраций;
• дизайн продуктов;
• простой интерфейс;
• настройка нескольких слоев изображения.

Deep Dream Generator

Еще один из лучших ИИ-генераторов — Deep Dream Generator от Google. Это популярнейший инструмент на рынке, который позволяет создавать реалистичные изображения с помощью искусственного интеллекта.

Он основан на нейросети, которая обучалась на миллионах изображений. При этом он прост в использовании: требуется только загрузить изображение, прежде чем инструмент создаст новую картинку на его основе.

Одно из основных применений Deep Dream — создание художественных работ, поскольку он использует различные изобразительные стили, характерные для разных мест или исторических периодов.

Он позволяет выбрать категорию, например, животных или пейзажи, прежде чем создавать реалистичное изображение. Вдобавок ко всему этому, Deep Dream позволяет вам выбрать три стиля: Deep Style, Thin Style или Deep Dream. После выбора стиля можно включить предварительный просмотр изображения.

Некоторые из самых интересных особенностей Deep Dream:

• создание реалистичных изображений с помощью ИИ;
• нейросеть, обученная на миллионах изображений;
• различные стили живописи;
• категории изображений;
• три различных стиля.

Artbreeder

Этот инструмент позволяет создавать различные варианты изображения с помощью машинного обучения.

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

Еще одна важная особенность Artbreeder — возможность создать тысячи иллюстраций и распределять их по папкам. Результаты можно загрузить в формате JPG или PNG.

Некоторые из самых интересных особенностей Artbreeder:

• повышение качества изображения;
• создание различных вариантов изображения;
• стили пейзажа, аниме, портретов;
• распределение иллюстраций по папкам;
• форматы JPG и PNG.

Big Sleep

Еще один ИИ генератор создает реалистичные изображения с нуля. С ним может легко управиться любой человек.

Big Sleep основан на Python и использует нейросеть для создания изображений. После предоставления входных данных программе, она выводит изображение. Это происходит благодаря порождающей состязательной сети (generative adversarial network, GAN).

С ее помощью генератора создает изображение, а модель дискриминатора различает реальное и поддельное. Это помогает Big Sleep со временем создавать очень реалистичные изображения.

Некоторые из самых интересных особенностей Big Sleep:

• реалистичные изображения с нуля;
• простота в использовании;
• основан на Python;
• использует GAN.

DeepAI

DeepAI создан в 2016 году с целью сделать ИИ демократичнее. Для этого инструмент использует ПО с открытым исходным кодом. Он предлагает различные функции для создания реалистичных изображений.

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

Некоторые из других инструментов, предлагаемых DeepAI, включают StyleGAN и BigGAN, которые также могут создавать реалистичные изображения. Инструмент CartoonGAN позволяет превращать изображения в мультфильмы.

Некоторые из самых интересных особенностей DeepAI:

• программа с открытым исходным кодом;
• различные инструменты для создания реалистичных изображений;
• изменение деталей для каждого изображения;
• создание мультфильмов с помощью CartoonGAN.

StarryAI

Одно из главных преимуществ StarryAI в том, что он дает полное право собственности на созданные изображения для личного или коммерческого использования. Он действует как бесплатный генератор NFT. Технология постоянно совершенствуется, но уже есть невероятные примеры искусства, созданные с помощью приложения.

Некоторые из самых интересных особенностей StarryAI:

• автоматический генератор изображений;
• не требуется участие пользователя;
• преобразование текста в изображение;
• бесплатная генерация NFT.

Fotor

Fotor — еще один из лучших инструментов искусственного интеллекта для создания NFT-искусства. Он требует минимальных усилий и предлагает продвинутые возможности для создания произведений искусства за считанные минуты.  Это также один из самых удобных инструментов для создания NFT-рисунков.

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

Некоторые из самых интересных особенностей Fotor:

• быстрое создание NFT;
• простота в использовании;
• различные стили и варианты редактирования;
• не требуется регистрация.

Runway ML

Позволяет генерировать изображения путем обучения и применения моделей МО. С помощью этого инструмента пользователь создает модели, которые добавляют реалистичные стили изображений. Кроме того, он позволяет рисовать анимацию и 3D-модели.

Также Runway ML включает в себя инструмент видеоредактора, который умеет заменять фон на видео.

Некоторые из инструментов, используемых Runway ML, включают анализ относительного движения, который позволяет ему анализировать то, что вы пытаетесь сделать. Он также имеет готовое распознавание объектов, которое помогает легко идентифицировать объекты на изображениях или видео.

Некоторые из самых интересных особенностей Runway ML:

• совместная работа над проектами;
• генерация реалистичных изображений;
• создание анимации и 3D-моделей;
• инструменты для редактирования видео;
• анализ движения.

WOMBO Dream

Список завершает WOMBO Dream — приложение для создания NFT, разработанное канадским стартапом WOMBO. Его часто называют лучшим универсальным приложением для создания NFT.

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

Некоторые из самых интересных особенностей WOMBO Dream:

• сюрреалистичные дизайны;
• бесплатный для использования;
• создание NFT;
• превращение фотографий в мультфильмы;
• различные стили.

Источник.

Фото на обложке: Unsplash

Подписывайтесь на наш Telegram-канал, чтобы быть в курсе последних новостей и событий!

html — значки SVG и значки PNG на современных веб-сайтах

спросил 8 лет, 11 месяцев назад

Изменено 1 год, 3 месяца назад

Просмотрено 91к раз

Мне интересно, почему так мало современных веб-сайтов до сих пор используют только PNG для значков (но это предположение основано только на моем наблюдении).

Насколько я знаю, основными причинами использования PNG вместо SVG являются IE8 и то, что SVG использует больше ресурсов процессора (но я не думаю, что это проблема для простых значков размером 1K). Я вижу (и мы в настоящее время используем) много преимуществ в использовании SVG, когда он используется как спрайт, как изображение или как встроенный SVG.

(Вопрос, требующий исследования: спрайт PNG, спрайт SVG и шрифты Icon сосредоточены на производительности и не имеют соответствующего ответа, проблема кэширования и сети Icon Font и SVG сосредоточена на сетевом трафике, но это легко решить, например, с помощью шаблонов. )

Если новый веб-сайт поддерживает только современные браузеры, есть ли причина не использовать SVG (или есть ли причина использовать PNG для значков)? Если нас не волнует IE8, а использование SVG подкрепляется шаблонами и/или кэшированием, есть ли смысл полагаться только на SVG?

• html
• svg
• иконки

4

Причины, по которым SVG может быть хорошим выбором:

• он легко поддерживает браузеры любого размера, особенно с CSS background-size
• вы можете масштабировать их вверх/вниз, например, до эффекта наведения
• вы можете встраивать SVG и изменять их в реальном времени с помощью JavaScript и DOM
• вы можете стилизовать SVG и части SVG с помощью CSS (изменение цветов, контуров и т. д.)
• вы можете динамически генерировать SVG на клиенте или сервере. Из-за их текстового характера вам не нужны низкоуровневые библиотеки или мощные серверы для их создания.

Причины PNG может быть хорошим выбором:

• поддержка браузера
• существующие инструменты для создания спрайт-листов PNG
• у большинства людей на компьютере есть редактор, совместимый с PNG
• ваша графика является фотографиями или другими изображениями, которые трудно векторизовать

Другие проблемы:

• некоторые редакторы SVG могут хранить метаданные в ваших SVG, увеличивая размер файла и, возможно, непреднамеренно раскрывая данные.
  • напр. когда вы экспортируете PNG в Inkscape, он сохраняет/сохраняет абсолютный путь к этому каталогу в SVG при сохранении
  • Компрессоры SVG могут удалить это, но я не проверял это (не стесняйтесь редактировать, если у вас есть)

6

Если вы не показываете очень простые формы/проекты или вам не нужно специально изменять части графики с помощью приложения, у вас не так много стимулов для использования SVG. Вы можете создать PNG в два раза больше исходного размера (для дисплеев Retina), и при этом размер файла будет на порядок меньше, не говоря уже о лучшем покрытии для устаревших браузеров (нет необходимости в javascript или полифилах).

Я говорю это как человек, который создает интерфейсы с помощью векторной графики. Это отличный инструмент для дизайна, но по доставке/пропускной способности/досягаемости PNG трудно превзойти. Буквально вчера вечером я протестировал известный логотип. CocaCola.svg стоил почти 20 тысяч. Так как это был сплошной/плоский цвет, я экспортировал его в формате PNG-8 со сжатием 12-цветной палитры и уменьшил его до 1,6K (!!!). из них.. ну, вы поняли.

Самое приятное то, что вы можете превратить PNG в uri данных base64 и встроить их прямо в вашу таблицу стилей. Это не рекомендуется для SVG — формата, который уже известен своими проблемами с производительностью и совместимостью, особенно в мобильных браузерах.

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

Удачного проектирования!

3

SVG — это круто (как хорошо описал FakeRainBrigand) и красиво отображается, но может быть довольно сложным. У браузера больше работы при работе с векторными данными, а не с пиксельными изображениями. Изображение — это один элемент, у SVG может быть много дочерних элементов, которые можно даже добавить в DOM при встроенном использовании.

Я не проводил каких-либо ценных тестов производительности, но с логической точки зрения SVG следует использовать осторожно, когда речь идет о производительности, особенно при работе с мобильными браузерами среднего возраста (нагрузка на ЦП). Было бы очень полезно иметь диаграмму, на которой можно было бы увидеть мощность ЦП, потребляемую 100 изображениями SVG и 100 изображениями PNG на разных устройствах Android и IOS…

Еще одна проблема с SVG заключается в том, что для тега требуются атрибуты ширины и высоты. для некоторых браузеров Android/Samsung и нашего старого доброго IE. И большинство современных редакторов SVG, таких как A***e Illustrator, просто добавляют атрибут «viewBox».

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

Отметим, что по производительности SVG может стать ужасным. Даже в современных браузерах, таких как Chrome (пишу это в 2019 году!), CMS-подобная страница с несколькими сотнями (практически 3-800) svg-иконок буквально подвешивает браузер на 5+ секунд, чтобы завершить рендеринг. Тем временем максимально загружая процессор.

Как отмечалось в другом месте, количество SVG, встроенных в страницу , экспоненциально увеличивает нагрузку на браузер, поэтому, если вы столкнетесь с такой ситуацией

Вариант №1: преобразовать svgs в веб-шрифт (см. диаграмму производительности здесь: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/)

Вариант №2: вернуться к простые старые PNG

В таких ситуациях, когда вы никогда не хотите делать что-то необычное, например, изменение цвета на лету, и у вас есть МНОЖЕСТВО экземпляров SVG, старый PNG делает свою работу и спасает день!

2

Это правда, png используется почти везде. Я думаю, это потому, что SVG в большинстве случаев довольно бесполезен, изображение должно быть больше (я думаю), и компьютеру приходится восстанавливать изображение всякий раз, когда вы его масштабируете (потому что вы всегда масштабируете изображения, не так ли? ?) Я думаю, что это самая важная причина.

2

Значки SVG значительно популярнее, чем значки PNG. Почему это так? Основная причина в том, что их проще создавать и они могут обрабатываться большинством веб-браузеров. Недостатком является то, что значки SVG не имеют того же уровня качества, что и их аналоги PNG. Они также не поддерживают 3D-преобразования CSS и могут вызвать проблемы в некоторых приложениях, например, при использовании вместе с кнопкой. Современные браузеры теперь поддерживают бесплатные значки SVG, которые можно легко сохранить на сервере и загрузить в клиентский код.

Ну, так как это старый вопрос, я просто обновлю то, что в современных браузерах; мобильный или настольный, в современных устройствах; телефоны или ПК, svg — лучший вариант, когда вы не имеете дело с реальными фотографиями, тогда я выбираю . webp. Я уменьшил размер приложения на много мегабайт, просто используя оптимизированный svgs для всех изображений, кроме фотографий, и используя webp для последнего.

Конечно, сейчас 2021 год, и устройства и браузеры намного лучше по производительности и поддержке. Итак, в настоящее время удобнее использовать svgs, а в последнее время даже лучше использовать значки svg, предоставляемые многими шрифтами значков, чем использование самого шрифта из-за того, что, возможно, вы загружаете и обрабатываете весь шрифт, из которого вы только используя от 10 до 20 иконок.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Нет иконок на сайте — Помощь

elfensky 15 апреля 2021 г., 19:56 1

Привет.

Когда я добавляю новый элемент, bitwardenrs не может получить его значок, и все, что я получаю, это обычный серый глобус. (как в веб-приложениях, так и в приложениях для iOS)

Пример журнала:

[2021-04-15 19:36:07.251][запрос][INFO] GET /icons/www.arduino.cc/icon.png
[2021-04-15 19:36:07.251][ответ][INFO ] ПОЛУЧИТЬ /icons//icon.png (значок) => 404 Не найдено

Если я вручную добавлю значок, например: /icon-cache/www.arduino.cc.png, и удалю www.adruino.cc.miss.png, он будет работать.

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

Я запускаю bitwardenrs в док-контейнере на vps ubuntu20.04 с aaPanel.
Проксируется через NginX с использованием одного из конфигов на вики.

БлэкДекс 15 апреля 2021 г., 21:37 2

Пожалуйста, проверьте страницу /admin/diagnostics и опубликуйте строку поддержки генератора, пожалуйста.

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

эльфийский 15 апреля 2021 г., 22:18 3

Хм. Пришлось увеличить тайм-аут nginx, в противном случае страница диагностики продолжала возвращать ошибку 504, но вот строка поддержки:

Ваша среда (создана на странице диагностики)

• Версия Bitwarden_rs: v1. 20.0
• Версия веб-хранилища: v2.19.0
• Запуск в Docker: true
• Использует обратный прокси: true
• Проверка заголовка IP: истина (X-Real-IP)
• Доступ в Интернет: ложь
• Доступ в Интернет через прокси: false
• Проверка DNS: ложь
• Проверка времени: верно
• Проверка конфигурации домена: ложь
• Проверка HTTPS: ложь
• Тип базы данных: SQLite
• Версия базы данных: 3.33.0
• Используемые клиенты:
• Обратный прокси и версия:
• Другая важная информация:

Конфигурация (сгенерирована на странице диагностики)

 {
  "_duo_akey": ноль,
  "_enable_duo": ложь,
  "_enable_email_2fa": ложь,
  "_enable_smtp": правда,
  "_enable_yubico": правда,
  "_ip_header_enabled": правда,
  "admin_token": "***",
  "разрешенные_iframe_ancestors": "",
  "attachments_folder": "данные/вложения",
  "authenticator_disable_time_drift": ложь,
  "папка_данных": "данные",
  "база данных_max_conns": 10,
  "database_url": "****/**. *******",
  "db_connection_retries": 15,
  "disable_2fa_remember": ложь,
  "disable_admin_token": ложь,
  "disable_icon_download": ложь,
  "домен": "****://*********",
  "домен_происхождение": "****://********",
  "путь_домена": "",
  "домен_набор": ложь,
  "дуо_хост": ноль,
  "duo_ikey": ноль,
  "duo_skey": ноль,
  "email_attempts_limit": 3,
  "email_expiration_time": 600,
  "email_token_size": 6,
  "enable_db_wal": правда,
  "extended_logging": правда,
  "helo_name": ноль,
  "hibp_api_key": ноль,
  "icon_blacklist_non_global_ips": правда,
  "icon_blacklist_regex": ноль,
  "icon_cache_folder": "данные/icon_cache",
  "icon_cache_negttl": 259200,
  "icon_cache_ttl": 2592000,
  "icon_download_timeout": 10,
  "invitation_org_name": "Bitwarden_RS",
  "invitations_allowed": правда,
  "ip_header": "X-Real-IP",
  "log_file": "/data/bitwarden.log",
  "log_level": "отладка",
  "log_timestamp_format": "%Y-%m-%d %H:%M:%S.%3f",
  "org_attachment_limit": ноль,
  "org_creation_users": "",
  "пароль_итераций": 100000,
  "reload_templates": ложь,
  "require_device_email": ложь,
  "rsa_key_filename": "данные/rsa_key",
  "sends_folder": "данные/отправляет",
  "show_password_hint": правда,
  "signups_allowed": правда,
  "signups_domains_whitelist": "",
  "signups_verify": ложь,
  "signups_verify_resend_limit": 6,
  "signups_verify_resend_time": 3600,
  "smtp_accept_invalid_certs": ложь,
  "smtp_accept_invalid_hostnames": ложь,
  "smtp_auth_mechanism": ноль,
  "smtp_debug": ложь,
  "smtp_explicit_tls": ложь,
  "smtp_from": "",
  "smtp_from_name": "Bitwarden_RS",
  "smtp_host": ноль,
  "smtp_password": ноль,
  "smtp_port": 587,
  "smtp_ssl": правда,
  "smtp_timeout": 15,
  "smtp_username": ноль,
  "templates_folder": "данные/шаблоны",
  "use_syslog": ложь,
  "user_attachment_limit": ноль,
  "web_vault_enabled": правда,
  "web_vault_folder": "веб-хранилище/",
  "веб-сокет_адрес": "0. 0.0.0",
  "websocket_enabled": правда,
  "веб-сокет_порт": 3012,
  "yubico_client_id": ноль,
  "yubico_secret_key": ноль,
  "юбико_сервер": ноль
}
 

хм. Так что в соответствии с этим у меня нет доступа в Интернет. Интересно, почему. Прокси NginX я взял с вики. Вот вставка моего конфига nginx, может проблема в этом?

Наполовину связанный вопрос: я новичок в докере, и сейчас я включаю страницу администратора, удаляя текущий контейнер и создавая новый с -e ADMIN_TOKEN=secret.
Это то, как вы должны это сделать, или вы должны/возможно передать этот аргумент уже запущенному/существующему контейнеру?

edit1: я проверил ufw, и у меня нет никаких правил, касающихся портов докера, которые использует контейнер.

edit2: я проверил iptables, и в нем есть эта строка:

image1396×84 11,3 КБ

(9002 — это 80-й порт контейнера) Может ли это быть причиной?

edit3: я сделал это:

, который добавил это в iptables:

image1430×164 23,7 КБ

, но у меня все еще нет доступа в Интернет. Как удалить это правило первого удаления?

БлэкДекс 16 апреля 2021 г., 9:07 4

Чтобы удалить правило, вы можете сделать следующее:

 статус ufw пронумерован
ufw удалить <номер-правила>
 

Кроме того, nginx — это ваш обратный прокси-сервер (хост > приложение), а не исходящий прокси-сервер (приложение > Интернет).
Я не знаю, как и почему, но, возможно, сетевая конфигурация контейнера может вызвать некоторые проблемы.
Вы также можете попытаться ненадолго отключить ufw и посмотреть, поможет ли это.

эльфийский 16 апреля 2021 г., 21:49 5

Неправильный файл /etc/resolve.conf моего хоста, что привело к неправильному разрешению контейнера.