Форум

милт · #11 (**permalink**) 30.05.2017, 23:55

Сообщение от рони

милт,
там нет jQuery

Ах вот оно что. Теперь всё работает. Спасибо за подсказки.

ksa · #12 (**permalink**) 31.05.2017, 08:51

Сообщение от милт

Домик получается, а другие картинки нет.

Не все картинки идут фоном...

j0hnik · #13 (**permalink**) 31.05.2017, 13:24

Сообщение от ksa

Не все картинки идут фоном...

Точно! еще учитывай что бывают иконочные шрифты, svg, картинки такого вида

style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXYAAABNCAIAAAA99tjoAAAABmJLR0QA/wD/AP+gvaeTAAAB5 UlEQVR4nO3czU3cUBhAURNRAYW4GhaUyIJqKIQWnAVSFhMRTfR8/Tfn7EDI38OGK3uk56dlWSaAxq+9FwBcmcQAoeebrz8/P4 sx8zz//U2zDjtrhHWu69TrnNzFACmJAUK3D0p/vL5/jR/94+3lnh8za99Z3yMGV7vlORmxzTrHT+llzqe7GCAkMUBIYoCQxAAhiQFCEgOEJAYISQwQkhggJDFA6McNBMDx3bnPYEcPl5gtL8nxL//2nJNH83CJgSs5/vbXh0vMWXY//++sszjLDmbW4uNeICQxQEhigJDEA CGJAUISA4QkBghJDBCSGCAkMUBIYoCQxAAhiQFCEgOEJAYISQwQkhggJDFASGKAkMQAIYkBQhIDhCQGCEkMEJIYICQxQEhig JDEACGJAULPey9gmqbp4+1l7yUAiUMk5qqk87xWuXYb/AGMj6gXeYjEvL5/jR/E/zMc0CESc1XSeV6D1+77qo0c5M7rPj5ild/0H3 zcC4QkBghJDBCSGCAkMUBIYoCQxAAhiQFCEgOEJAYISQwQkhggJDFA6Med1ltu8DULrsrLHC7i+K8mWnHKKV71tNZB6hH1Ij0 oAaHbu5h5njebbRZc3tOyLHuvAbgsD0pASGKAkMQAIYkBQhIDhH4D5OR6uUTLPHcAAAAASUVORK5CYII=);

это уже готовая картинка без внешних файлов!

милт · #14 (**permalink**) 09.06.2017, 22:54

Сообщение от ksa

Не все картинки идут фоном...

Ну это я знаю.

Сообщение от j0hnik

Точно! еще учитывай что бывают иконочные шрифты, svg, картинки такого вида
это уже готовая картинка без внешних файлов!

А где такие картинки можно встретить? Хочу на них посмотреть.

j0hnik · #15 (**permalink**) 09.06.2017, 23:12

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0c
mF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcg
MS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxu
czp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUx
MnB4IiB2aWV3Qm94PSIwIDAgOTc4LjY3MyA5NzguNjczIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5NzguNjczIDk3OC42NzM7IiB4bWw6c3BhY2U9InByZXNlcnZl
Ij4KPGc+Cgk8cGF0aCBkPSJNNjQuMTI2LDIxNC4xMjNjMzUuNiw4Mi44MDEsOTUuNywxNjQuNywxNzkuOCwyMDAuMDAxYzkuNiw0LDIwLjUsNywzMS43LDkuNWMyMi40LTMzLjQsNDgu
MS02MC41MDEsNzguMi04Mi43ICAgYzI1Ljg5OS0xOSw1My0zMy45LDgwLjg5OS00NS42MDFjLTgtNS42LTE2LjM5OS0xMC43LTI1LjItMTUuM2MtMzUtMTguMy03Mi44OTktMzQuNC0x
MDkuOC01MS43YzM0LjcsOS40LDc0LjUsMTIuOSwxMDcuNywyNSAgIGMyMC43LDcuNjAxLDM5LjgsMTguMTAxLDU3LjYsMzAuNjAxYzUzLjEwMS0xOC4xMDEsMTA4LjYwMS0yNi44MDEs
MTY0LTMzLjRjLTQ0Ljg5OS03NC42LTE0MC43LTEzNC41LTIxMi45LTE2MS42ICAgYy03NS40LTI4LjMwMS0xNjAuOC0zMS44MDEtMjQ0LjctNDAuNWMtNTEuNC01LjMwMS0xMDcuMy0y
NC41LTE0OC4yLTQ2LjljLTkuMy01LjEtMTkuMiwzLjQtMTYsMTMuNyAgIEMyNy4zMjYsNzkuNTIzLDM3LjUyNiwxNTIuMzIzLDY0LjEyNiwyMTQuMTIzeiIgZmlsbD0iIzkxREM1QSIv
PgoJPHBhdGggZD0iTTk1MC42MjcsMjA0LjMyM2MtOTQuNjAxLDUxLjQtMjAzLjEwMSw1Ny43LTMwOS40LDY5LjljLTUxLjg5OSw2LTEwMy4zLDEzLjM5OS0xNTIuMjAxLDI4LjIgICBj
LTEwLjYsMy4xOTktMjEuMTk5LDYuOC0zMS42LDEwLjhjLTMwLjksMTEuOC02MC43LDI3LjMtODguOCw0OGMtMjYuNCwxOS4zOTktNDgsNDIuNC02Ni4yLDY3LjcgICBjLTI5LDQwLjM5
OS00OS4yLDg2Ljg5OS02NS44LDEzNS4yYy0zMC4zLDg3LjY5OS00NC4yLDE4MC44OTktNDEuNSwyNzMuNmMxLjEsMzcuNiwxLjcsNzYuNywxMSwxMTMuNCAgIGMyLjEsOC4xLDQuMSwxO
C4zOTksMTAuNCwyNC4zOTljOC4yLDcuOSwyMi45LTAuMiwxOS42LTExLjdjLTIzLjgtODEuMS05LTE3NS44OTksMjMuOS0yNTMuMzk5ICAgYzM3LjgtODkuMTAxLDExMC44LTE0Mi4xM
DEsMjAwLTE3NC40YzIzLjctOC42LDQ3LjkwMS0xNi4xLDcyLjUtMjMuMmMwLjUtMC4xOTksMS0wLjE5OSwxLjUtMC4xOTljNC45LDAsNyw3LjE5OSwxLjksOS41ICAgYy0yOSwxMy4xLT
U3LjgsMjYuMy04NS4yMDEsNDAuNmMtMTM0LjIsNzAtMTkyLjgsMjMzLTE0Mi41LDIzM2M0LjEwMSwwLDguOS0xLjEsMTQuNC0zLjRjNzcuNi0zMi4xLDE2OS44LTMyLjM5OSwyNTUuMS0
0OC4xOTkgICBjMzAtNS41LDU5LjItMTMsODYuNjAxLTI0LjRjMTA4LjgtNDUuNCwxODYuNi0xMzQuMiwyMzIuODk5LTI0MWMzNC41LTc5LjcsNDcuOS0xNzMuOCw3NC0yNTYuNjAxYzM
uNC0xMC42LTQuMS0xOS42OTktMTMuMy0xOS42OTkgICBDOTU1LjYyNywyMDIuMzIzLDk1My4xMjcsMjAyLjkyNCw5NTAuNjI3LDIwNC4zMjN6IiBmaWxsPSIjOTFEQzVBIi8+CjwvZz4
KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+Cjw
vZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
</body>
</html>

http://www.flaticon.com/ тут много

милт · #16 (**permalink**) 09.06.2017, 23:59

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

j0hnik · #17 (**permalink**) 10.06.2017, 06:26

Сообщение от милт

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

Допустим.

а вот эти как достанешь?

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
.tt:before {
	content: "\f269";
	font-family: FontAwesome;
	font-size: 100px;
}
	
</style>
</head>
<body>
<div class="tt"></div>
</body>
</html>

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>

милт · #18 (**permalink**) 10.06.2017, 19:51

Сообщение от j0hnik

Допустим.

а вот эти как достанешь?

Я нашёл в гугле про :before и content:, но там надо много читать чтобы в них разобраться. Можете подсказать готовый вариант, как получить такие картинки?

j0hnik · #19 (**permalink**) 11.06.2017, 03:17

Сообщение от милт

Я нашёл в гугле про :before и content:, но там надо много читать чтобы в них разобраться. Можете подсказать готовый вариант, как получить такие картинки?

Да тут один вариант, подключать библиотеку и доставать из css или элемента параметры.

Форум

Справочник

Discord чат

Курсы javascript