{"id":3199,"date":"2017-08-07T11:22:42","date_gmt":"2017-08-07T08:22:42","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/create-your-first-web-site-icon-font\/"},"modified":"2020-04-08T19:55:48","modified_gmt":"2020-04-08T16:55:48","slug":"create-your-first-web-site-icon-font","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/create-your-first-web-site-icon-font\/","title":{"rendered":"Create your first web site. Icon font"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;Create your first web site. Icon font&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;4.4.2&#8243; custom_padding=&#8221;0px|||&#8221; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]In this lesson we&#8217;ll finish to make main page of our project &#8211; we&#8217;ll add footer, also including icon font. First of all I&#8217;ll show how to make footer is always in the bottom of web page.<br \/>\nIf you would like use icons in your site, you will probably want to use images. For example, <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.iconfinder.com\/<\/a>. Second way is the icon font. Nowadays icon font is very popular. Its main advantage is small page load. Image files have larger size than icon font.<br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=eNdnHIfBdRk&#8221; _builder_version=&#8221;3.0.47&#8243;][\/et_pb_video][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]In this lesson (and in my projects) I use <a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fortawesome.github.io\/Font-Awesome\/<\/a>. This font updates very often. There a lot of icons in font awesome. Font awesome is simply font, that&#8217;s why we can change icon color, size and so on. We can&#8217;t do it with images.<br \/>\nList of icons <a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fortawesome.github.io\/Font-Awesome\/icons\/<\/a>.<br \/>\nAlso there are additional tools, for example icons animation <a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fortawesome.github.io\/Font-Awesome\/examples\/<\/a>.<\/p>\n<p>Icon font is simply css file, which read font from another folder &#8220;fonts&#8221;. All files and folders are in one zip archive, you can download.<\/p>\n<p>Second way to include font awesome is <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Content_Delivery_Network\" target=\"_blank\" rel=\"noopener noreferrer\">cdn<\/a>.<\/p>\n<p>You only need to add <a href=\"https:\/\/www.bootstrapcdn.com\/fontawesome\/\" target=\"_blank\" rel=\"noopener noreferrer\"> link<\/a> to link tag href attribute.<br \/>\n[\/et_pb_text][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InJ1Ij4KPGhlYWQ+Cgk8bWV0YSBjaGFyc2V0PSJVVEYtOCI+Cgk8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL25lY29sYXMuZ2l0aHViLmlvL25vcm1hbGl6ZS5jc3MvMy4wLjIvbm9ybWFsaXplLmNzcyI+Cgk8bGluayBocmVmPSdodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Um9ib3RvJnN1YnNldD1sYXRpbixjeXJpbGxpYy1leHQnIHJlbD0nc3R5bGVzaGVldCcgdHlwZT0ndGV4dC9jc3MnPgoJPCEtLTxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iZm9udC1hd2Vzb21lLm1pbi5jc3MiPi0tPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2ZvbnQtYXdlc29tZS80LjUuMC9jc3MvZm9udC1hd2Vzb21lLm1pbi5jc3MiPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSI5NjAuY3NzIj4KPC9oZWFkPgo8Ym9keT4KPGhlYWRlcj4KPGRpdiBjbGFzcz0id3JhcHBlckhlYWRlciI+Cgk8ZGl2IGNsYXNzPSJsb2dvIj4KCQk8aW1nIHNyYz0iaHR0cDovL2thbWlsLWFiemFsb3YucnUvd3AtY29udGVudC90aGVtZXMvbWlsbGVuaXVtU2Vjb25kL2ltZy9sb2dvLnBuZyIgYWx0PSIiPgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJwaG9uZSI+MTIzLTQ1LTY3PC9kaXY+Cgk8ZGl2IGNsYXNzPSJzZWFyY2giPgoJPGZvcm0+CgkJPGlucHV0IHR5cGU9InRleHQiLz4KCQk8aW5wdXQgdHlwZT0ic3VibWl0Ij4KCTwvZm9ybT4KCTwvZGl2Pgo8L2Rpdj4KCjxuYXYgaWQ9Im1lbnUiPgo8dWw+Cgk8bGk+PGEgaHJlZj0iLyI+0JPQu9Cw0LLQvdCw0Y88L2E+PC9saT4KCTxsaT48YSBocmVmPSJhYm91dC5odG1sIj7QniDQvdCw0YE8L2E+CgkJPHVsIGNsYXNzPSJzdWJtZW51Ij4KCQkJPGxpPjxhIGhyZWY9IiMiPtCd0LDRiNCwINC60L7QvNCw0L3QtNCwPC9hPjwvbGk+CgkJCTxsaT48YSBocmVmPSIjIj7QndC+0LLQvtGB0YLQuDwvYT48L2xpPgoJCTwvdWw+Cgk8L2xpPgoJPGxpPjxhIGhyZWY9ImNvbnRhY3QuaHRtbCI+0JrQvtC90YLQsNC60YLRizwvYT48L2xpPgo8L3VsPgo8L25hdj4KPC9oZWFkZXI+Cgo8ZGl2IGlkPSJjb250ZW50Ij4KPGRpdiBjbGFzcz0iY29udGFpbmVyXzEyIj4KCTxkaXYgY2xhc3M9ImdyaWRfMTIgdGV4dC1jZW50ZXIiPgoJCTxoMT7Qn9C+0YfQtdC80YMg0L3QsNC00L4g0LLRi9Cx0YDQsNGC0Ywg0LjQvNC10L3QvdC+INC90LDRgTwvaDE+CgkJCdCf0YDQtdC40LzRg9GJ0LXRgdGC0LLQsCwg0LrQvtGC0L7RgNGL0LUg0LLQsNGBINGD0LTQuNCy0Y\/RggoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYiPgoJCTxoMj7QktGL0YHQvtC60L7QtSDQutCw0YfQtdGB0YLQstC+PC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIE9iY2FlY2F0aSBiZWF0YWUgYWNjdXNhbnRpdW0gbW9sZXN0aWFlIHBvcnJvIGRlc2VydW50IGZ1Z2lhdCBjdW1xdWUsIGl0YXF1ZSBkaWduaXNzaW1vcyBkZWJpdGlzIG1vZGkgbmVxdWUgbmloaWwgaGljLCBmYWNpbGlzLCByZXB1ZGlhbmRhZSBlc3QgYWQgZW5pbSBxdW9kLCB1bmRlLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYgc3VmZml4XzEiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+CjwvZGl2Pgo8L2Rpdj4KPC9kaXY+Cgo8Zm9vdGVyPgo8ZGl2IGNsYXNzPSJjb250YWluZXJfMTIiPgoJPGRpdiBjbGFzcz0iZ3JpZF8xMiI+CgkJPHVsIGNsYXNzPSJpY29ucyI+CgkJCTxsaT48YSBocmVmPSIjIj48aSBjbGFzcz0iZmEgZmEtdmsgZmEtNXggZmEtc3BpbiI+PC9pPjwvYT48L2xpPgoJCQk8bGk+PGEgaHJlZj0iIyI+PGkgY2xhc3M9ImZhIGZhLWZhY2Vib29rIGZhLTV4IGZhLXNwaW4iPjwvaT48L2E+PC9saT4KCQkJPGxpPjxhIGhyZWY9IiMiPjxpIGNsYXNzPSJmYSBmYS10d2l0dGVyIGZhLTV4IGZhLXNwaW4iPjwvaT48L2E+PC9saT4KCQkJPGxpPjxhIGhyZWY9IiMiPjxpIGNsYXNzPSJmYSBmYS1nb29nbGUtcGx1cyBmYS01eCBmYS1zcGluIj48L2k+PC9hPjwvbGk+Cgk8L3VsPgoJPC9kaXY+CjwvZGl2Pgo8L2Zvb3Rlcj4KPC9ib2R5Pgo8L2h0bWw+&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;4.4.2&#8243; hover_enabled=&#8221;0&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InJ1Ij4KPGhlYWQ+Cgk8bWV0YSBjaGFyc2V0PSJVVEYtOCI+Cgk8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL25lY29sYXMuZ2l0aHViLmlvL25vcm1hbGl6ZS5jc3MvMy4wLjIvbm9ybWFsaXplLmNzcyI+Cgk8bGluayBocmVmPSdodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Um9ib3RvJnN1YnNldD1sYXRpbixjeXJpbGxpYy1leHQnIHJlbD0nc3R5bGVzaGVldCcgdHlwZT0ndGV4dC9jc3MnPgoJPCEtLTxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iZm9udC1hd2Vzb21lLm1pbi5jc3MiPi0tPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2ZvbnQtYXdlc29tZS80LjUuMC9jc3MvZm9udC1hd2Vzb21lLm1pbi5jc3MiPgoJPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSI5NjAuY3NzIj4KPC9oZWFkPgo8Ym9keT4KPGhlYWRlcj4KPGRpdiBjbGFzcz0id3JhcHBlckhlYWRlciI+Cgk8ZGl2IGNsYXNzPSJsb2dvIj4KCQk8aW1nIHNyYz0iaHR0cDovL2thbWlsLWFiemFsb3YucnUvd3AtY29udGVudC90aGVtZXMvbWlsbGVuaXVtU2Vjb25kL2ltZy9sb2dvLnBuZyIgYWx0PSIiPgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJwaG9uZSI+MTIzLTQ1LTY3PC9kaXY+Cgk8ZGl2IGNsYXNzPSJzZWFyY2giPgoJPGZvcm0+CgkJPGlucHV0IHR5cGU9InRleHQiLz4KCQk8aW5wdXQgdHlwZT0ic3VibWl0Ij4KCTwvZm9ybT4KCTwvZGl2Pgo8L2Rpdj4KCjxuYXYgaWQ9Im1lbnUiPgo8dWw+Cgk8bGk+PGEgaHJlZj0iLyI+0JPQu9Cw0LLQvdCw0Y88L2E+PC9saT4KCTxsaT48YSBocmVmPSJhYm91dC5odG1sIj7QniDQvdCw0YE8L2E+CgkJPHVsIGNsYXNzPSJzdWJtZW51Ij4KCQkJPGxpPjxhIGhyZWY9IiMiPtCd0LDRiNCwINC60L7QvNCw0L3QtNCwPC9hPjwvbGk+CgkJCTxsaT48YSBocmVmPSIjIj7QndC+0LLQvtGB0YLQuDwvYT48L2xpPgoJCTwvdWw+Cgk8L2xpPgoJPGxpPjxhIGhyZWY9ImNvbnRhY3QuaHRtbCI+0JrQvtC90YLQsNC60YLRizwvYT48L2xpPgo8L3VsPgo8L25hdj4KPC9oZWFkZXI+Cgo8ZGl2IGlkPSJjb250ZW50Ij4KPGRpdiBjbGFzcz0iY29udGFpbmVyXzEyIj4KCTxkaXYgY2xhc3M9ImdyaWRfMTIgdGV4dC1jZW50ZXIiPgoJCTxoMT7Qn9C+0YfQtdC80YMg0L3QsNC00L4g0LLRi9Cx0YDQsNGC0Ywg0LjQvNC10L3QvdC+INC90LDRgTwvaDE+CgkJCdCf0YDQtdC40LzRg9GJ0LXRgdGC0LLQsCwg0LrQvtGC0L7RgNGL0LUg0LLQsNGBINGD0LTQuNCy0Y\/RggoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYiPgoJCTxoMj7QktGL0YHQvtC60L7QtSDQutCw0YfQtdGB0YLQstC+PC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIE9iY2FlY2F0aSBiZWF0YWUgYWNjdXNhbnRpdW0gbW9sZXN0aWFlIHBvcnJvIGRlc2VydW50IGZ1Z2lhdCBjdW1xdWUsIGl0YXF1ZSBkaWduaXNzaW1vcyBkZWJpdGlzIG1vZGkgbmVxdWUgbmloaWwgaGljLCBmYWNpbGlzLCByZXB1ZGlhbmRhZSBlc3QgYWQgZW5pbSBxdW9kLCB1bmRlLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzQiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+Cgk8ZGl2IGNsYXNzPSJncmlkXzYgc3VmZml4XzEiPgoJCTxoMj7QkdGL0YHRgtGA0LDRjyDQtNC+0YHRgtCw0LLQutCwPC9oMj4KCQkJTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFwZXJpYW0gbm9uIGluY2lkdW50IHJlbSBjb25zZXF1dW50dXIgcHJvdmlkZW50LCBtYWduaSB1bmRlIG9mZmljaWEsIHJlaWNpZW5kaXMgZXhjZXB0dXJpIGNvcnJ1cHRpIGxhYm9yZSBhbGlhcyBlYXF1ZSB2ZW5pYW0gZGVsZW5pdGkgbGF1ZGFudGl1bSBudW1xdWFtIGlkIG5hbSBtb2RpLgoJPC9kaXY+CjwvZGl2Pgo8L2Rpdj4KPC9kaXY+Cgo8Zm9vdGVyPgo8ZGl2IGNsYXNzPSJjb250YWluZXJfMTIiPgoJPGRpdiBjbGFzcz0iZ3JpZF8xMiI+CgkJPHVsIGNsYXNzPSJpY29ucyI+CgkJCTxsaT48YSBocmVmPSIjIj48aSBjbGFzcz0iZmEgZmEtdmsgZmEtNXggZmEtc3BpbiI+PC9pPjwvYT48L2xpPgoJCQk8bGk+PGEgaHJlZj0iIyI+PGkgY2xhc3M9ImZhIGZhLWZhY2Vib29rIGZhLTV4IGZhLXNwaW4iPjwvaT48L2E+PC9saT4KCQkJPGxpPjxhIGhyZWY9IiMiPjxpIGNsYXNzPSJmYSBmYS10d2l0dGVyIGZhLTV4IGZhLXNwaW4iPjwvaT48L2E+PC9saT4KCQkJPGxpPjxhIGhyZWY9IiMiPjxpIGNsYXNzPSJmYSBmYS1nb29nbGUtcGx1cyBmYS01eCBmYS1zcGluIj48L2k+PC9hPjwvbGk+Cgk8L3VsPgoJPC9kaXY+CjwvZGl2Pgo8L2Zvb3Rlcj4KPC9ib2R5Pgo8L2h0bWw+[\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;Code lesson (CSS)&#8221; code=&#8221;LypAaW1wb3J0IHVybCgiYW5haGl0L2FuYWhpdC5jc3MiKTsqLwoKaHRtbCwgYm9keSB7CgloZWlnaHQ6IDEwMCU7Cn0KCiNjb250ZW50IHsKCW1pbi1oZWlnaHQ6IDEwMCU7Cn0KCmJvZHkgewoJZm9udC1mYW1pbHk6ICJSb2JvdG8iLCAiQXJpYWwiLCBzYW5zLXNlcmlmOwoJZm9udC1zaXplOiAxNnB4OwoJY29sb3I6ICMyMDIwMjA7Cn0KCmhlYWRlciB7Cglib3gtc2hhZG93OiAwIDAgMTVweCAycHggIzIwMjAyMDsKfQoKLndyYXBwZXJIZWFkZXIgewoJYmFja2dyb3VuZC1jb2xvcjogIzdjNGRmZjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KCi5sb2dvLCAucGhvbmUsIC5zZWFyY2ggewoJZmxvYXQ6IGxlZnQ7Cgl3aWR0aDogMzMlOwp9CgoucGhvbmUgcCB7Cgljb2xvcjogI2ZmZjsKCWZvbnQtc2l6ZTogMjVweDsKCW1hcmdpbi10b3A6IDIwcHg7Cn0KCi5zZWFyY2ggZm9ybSB7CgltYXJnaW4tdG9wOiAyNXB4Owp9CgpuYXYgewoJd2lkdGg6IDEwMCU7Cn0KCiNtZW51IHVsIHsKCXBhZGRpbmctdG9wOiAwOwoJbWFyZ2luOiAwOwp9CgojbWVudSB1bCBsaSB7CglsaXN0LXN0eWxlOiBub25lOwoJcG9zaXRpb246IHJlbGF0aXZlOwoJZGlzcGxheTogaW5saW5lLWJsb2NrOwp9CgojbWVudSB1bCBsaSBhIHsKCWNvbG9yOiBpbmhlcml0OwoJdGV4dC1kZWNvcmF0aW9uOiBub25lOwoJZm9udC1zaXplOiAxNnB4OwoJZGlzcGxheTogYmxvY2s7CglwYWRkaW5nOiAwIDEwcHg7CglsaW5lLWhlaWdodDogNDBweDsKfQoKI21lbnUgdWwgbGk6aG92ZXIgLnN1Ym1lbnUgewoJZGlzcGxheTogYmxvY2s7Cn0KCi5zdWJtZW51IHsKCWRpc3BsYXk6IG5vbmU7Cglwb3NpdGlvbjogYWJzb2x1dGU7CgliYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwoJdG9wOiA0MHB4OwoJcGFkZGluZzogMDsKCWJvcmRlcjogMXB4IHNvbGlkICNlMWUxZTE7Cn0KCi5zdWJtZW51IGxpIHsKCW1pbi13aWR0aDogMTcwcHg7Cn0KCi5zdWJtZW51IGxpOmhvdmVyIHsKCWJhY2tncm91bmQtY29sb3I6ICM3YzRkZmY7Cgljb2xvcjogI2ZmZjsKfQoKLnRleHQtY2VudGVyIHsKCXRleHQtYWxpZ246IGNlbnRlcjsKfQoKZm9vdGVyIHsKCWJhY2tncm91bmQtY29sb3I6ICMyMzIzMjM7CgloZWlnaHQ6IDIwMHB4Owp9CgouaWNvbnMgewoJdGV4dC1hbGlnbjogY2VudGVyOwp9CgouaWNvbnMgbGl7CglkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CglsaXN0LXN0eWxlOm5vbmU7CgltYXJnaW46IDAgMTBweDsKfQoKLmljb25zIGxpIGEgewoJY29sb3I6ICNmZmY7Cn0KCi5mYS12azpob3ZlciB7Cgljb2xvcjogIzRlNzI5YTsKfQoKLmZhLWZhY2Vib29rOmhvdmVyIHsKCWNvbG9yOiAjM2E1Nzk1Owp9CgouZmEtdHdpdHRlcjpob3ZlciB7Cgljb2xvcjogIzU1YWNlZTsKfQoKLmZhLWdvb2dsZS1wbHVzOmhvdmVyIHsKCWNvbG9yOiNkZDRiMzk7Cn0=&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430 &#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;4.4.2&#8243; hover_enabled=&#8221;0&#8243;]LypAaW1wb3J0IHVybCgiYW5haGl0L2FuYWhpdC5jc3MiKTsqLwoKaHRtbCwgYm9keSB7CgloZWlnaHQ6IDEwMCU7Cn0KCiNjb250ZW50IHsKCW1pbi1oZWlnaHQ6IDEwMCU7Cn0KCmJvZHkgewoJZm9udC1mYW1pbHk6ICJSb2JvdG8iLCAiQXJpYWwiLCBzYW5zLXNlcmlmOwoJZm9udC1zaXplOiAxNnB4OwoJY29sb3I6ICMyMDIwMjA7Cn0KCmhlYWRlciB7Cglib3gtc2hhZG93OiAwIDAgMTVweCAycHggIzIwMjAyMDsKfQoKLndyYXBwZXJIZWFkZXIgewoJYmFja2dyb3VuZC1jb2xvcjogIzdjNGRmZjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KCi5sb2dvLCAucGhvbmUsIC5zZWFyY2ggewoJZmxvYXQ6IGxlZnQ7Cgl3aWR0aDogMzMlOwp9CgoucGhvbmUgcCB7Cgljb2xvcjogI2ZmZjsKCWZvbnQtc2l6ZTogMjVweDsKCW1hcmdpbi10b3A6IDIwcHg7Cn0KCi5zZWFyY2ggZm9ybSB7CgltYXJnaW4tdG9wOiAyNXB4Owp9CgpuYXYgewoJd2lkdGg6IDEwMCU7Cn0KCiNtZW51IHVsIHsKCXBhZGRpbmctdG9wOiAwOwoJbWFyZ2luOiAwOwp9CgojbWVudSB1bCBsaSB7CglsaXN0LXN0eWxlOiBub25lOwoJcG9zaXRpb246IHJlbGF0aXZlOwoJZGlzcGxheTogaW5saW5lLWJsb2NrOwp9CgojbWVudSB1bCBsaSBhIHsKCWNvbG9yOiBpbmhlcml0OwoJdGV4dC1kZWNvcmF0aW9uOiBub25lOwoJZm9udC1zaXplOiAxNnB4OwoJZGlzcGxheTogYmxvY2s7CglwYWRkaW5nOiAwIDEwcHg7CglsaW5lLWhlaWdodDogNDBweDsKfQoKI21lbnUgdWwgbGk6aG92ZXIgLnN1Ym1lbnUgewoJZGlzcGxheTogYmxvY2s7Cn0KCi5zdWJtZW51IHsKCWRpc3BsYXk6IG5vbmU7Cglwb3NpdGlvbjogYWJzb2x1dGU7CgliYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwoJdG9wOiA0MHB4OwoJcGFkZGluZzogMDsKCWJvcmRlcjogMXB4IHNvbGlkICNlMWUxZTE7Cn0KCi5zdWJtZW51IGxpIHsKCW1pbi13aWR0aDogMTcwcHg7Cn0KCi5zdWJtZW51IGxpOmhvdmVyIHsKCWJhY2tncm91bmQtY29sb3I6ICM3YzRkZmY7Cgljb2xvcjogI2ZmZjsKfQoKLnRleHQtY2VudGVyIHsKCXRleHQtYWxpZ246IGNlbnRlcjsKfQoKZm9vdGVyIHsKCWJhY2tncm91bmQtY29sb3I6ICMyMzIzMjM7CgloZWlnaHQ6IDIwMHB4Owp9CgouaWNvbnMgewoJdGV4dC1hbGlnbjogY2VudGVyOwp9CgouaWNvbnMgbGl7CglkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CglsaXN0LXN0eWxlOm5vbmU7CgltYXJnaW46IDAgMTBweDsKfQoKLmljb25zIGxpIGEgewoJY29sb3I6ICNmZmY7Cn0KCi5mYS12azpob3ZlciB7Cgljb2xvcjogIzRlNzI5YTsKfQoKLmZhLWZhY2Vib29rOmhvdmVyIHsKCWNvbG9yOiAjM2E1Nzk1Owp9CgouZmEtdHdpdHRlcjpob3ZlciB7Cgljb2xvcjogIzU1YWNlZTsKfQoKLmZhLWdvb2dsZS1wbHVzOmhvdmVyIHsKCWNvbG9yOiNkZDRiMzk7Cn0=[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this lesson we&#8217;ll finish to make main page of our project &#8211; we&#8217;ll add footer, also including icon font. First of all I&#8217;ll show how to make footer is always in the bottom of web page. If you would like use icons in your site, you will probably want to use images. For example, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430-\u0432\u0438\u0437\u0438\u0442\u043a\u0438 - \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u043f\u043e\u0434\u0432\u0430\u043b, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u043a\u043e\u043d\u043a\u0438. \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435, \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0443\u0440\u043e\u043a\u0430 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \"\u043f\u0440\u0438\u0431\u0438\u0442\u044c\" \u043f\u043e\u0434\u0432\u0430\u043b \u043a \u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e css \u043f\u0440\u0430\u0432\u0438\u043b. \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 - \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0418 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0435\u0440\u043d\u043e. \u0420\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e. \u0412 \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044f \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u00a0<a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\">https:\/\/www.iconfinder.com\/<\/a>. \u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 - \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. \u0421\u0435\u0439\u0447\u0430\u0441 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0430\u0431\u0438\u0440\u0430\u044e\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c. \u0412 \u0447\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u043b\u044e\u0441 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432? \u041e\u043d \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u043f\u0440\u0430\u0439\u0442 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u0439\u0442 \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0442\u043e \u0438\u043a\u043e\u043d\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0430\u0442\u044c \u0438 \u0431\u0435\u0437 \u0442\u043e\u0433\u043e \u043b\u0438\u0448\u043d\u0438\u043c \u0433\u0440\u0443\u0437\u043e\u043c.<!--more-->\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=eNdnHIfBdRk\r\n\r\n\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 (\u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435) \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442\u00a0<a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">https:\/\/fortawesome.github.io\/Font-Awesome\/<\/a>. \u042d\u0442\u043e\u0442 \u0448\u0440\u0438\u0444\u0442 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f (\u043f\u043e \u043c\u0435\u0440\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u043d\u043e\u0432\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a). \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e <strong>\u0448\u0440\u0438\u0444\u0442<\/strong>, \u0442\u043e \u043c\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c. \u0421 \u043a\u0430\u0440\u0442\u0438\u043a\u0430\u043c\u0438, \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u043c\u044b \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c - \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0446\u0432\u0435\u0442, \u0442\u0430\u043a \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430).\r\n\u0421\u043f\u0438\u0441\u043e\u043a \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435\u00a0<a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">https:\/\/fortawesome.github.io\/Font-Awesome\/icons\/<\/a>\r\n\u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043a\u043e\u043d\u043e\u043a, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0438 \u0442.\u0434 -\u00a0<a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/examples\/\" target=\"_blank\">https:\/\/fortawesome.github.io\/Font-Awesome\/examples\/<\/a>\r\n\r\n\u0418\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 - \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 css \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0438\u0442\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 fonts. \u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\u0435.\r\n\r\n<img class=\"img-responsive\" title=\"font awesome \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\" src=\"http:\/\/kamil-abzalov.com\/wp-content\/uploads\/2015\/12\/font-awesome-distr-e1450554007274.png\" alt=\"font awesome \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\" \/>\r\n\r\n<p style=\"text-align: center;\"><strong>\u0420\u0438\u0441.1 - \u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\u0430 font awesome<\/strong><\/p>\r\n\r\n<img class=\"img-responsive\" title=\"font-awesome css\" src=\"http:\/\/kamil-abzalov.com\/wp-content\/uploads\/2015\/12\/font-awesome-css-e1450554036854.png\" alt=\"font-awesome css\" \/>\r\n\r\n<p style=\"text-align: center;\"><strong>\u0420\u0438\u0441.2 - CSS \u0444\u0430\u0439\u043b\u044b<\/strong><\/p>\r\n\r\n<img class=\"img-responsive\" title=\"\u0448\u0440\u0438\u0444\u0442\u044b\" src=\"http:\/\/kamil-abzalov.com\/wp-content\/uploads\/2015\/12\/fonts-e1450554055502.png\" alt=\"\u0448\u0440\u0438\u0444\u0442\u044b\" \/>\r\n\r\n<p style=\"text-align: center;\"><strong>\u0420\u0438\u0441.3 - \u0412\u0435\u0431 \u0448\u0440\u0438\u0444\u0442\u044b<\/strong><\/p>\r\n\r\n<img class=\"img-responsive\" title=\"\u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0432\u0430\u043b\u0430 \u0441\u0430\u0439\u0442\u0430\" src=\"http:\/\/kamil-abzalov.com\/wp-content\/uploads\/2015\/12\/bad-footer-e1450608422845.png\" alt=\"\u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0432\u0430\u043b\u0430 \u0441\u0430\u0439\u0442\u0430\" \/>\r\n\r\n<p style=\"text-align: center;\"><strong>\u0420\u0438\u0441.4 - \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0432\u0430\u043b\u0430 \u0441\u0430\u0439\u0442\u0430<\/strong><\/p>\r\n\r\n\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c font awesome \u043d\u0430 \u0441\u0432\u043e\u0439 \u0441\u0430\u0439\u0442 - \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Content_Delivery_Network\" target=\"_blank\">CDN<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443 \u0442\u044d\u0433\u0430 link \u0432 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0435 href \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 <a href=\"https:\/\/www.bootstrapcdn.com\/fontawesome\/\" target=\"_blank\">https:\/\/www.bootstrapcdn.com\/fontawesome\/<\/a>\r\n\r\n<pre><code><br \/><!DOCTYPE html>\r\n<html lang=\"ru\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Document<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/necolas.github.io\/normalize.css\/3.0.2\/normalize.css\">\r\n    <link href='https:\/\/fonts.googleapis.com\/css?family=Roboto&subset=latin,cyrillic-ext' rel='stylesheet' type='text\/css'>\r\n    <!--<link rel=\"stylesheet\" href=\"font-awesome.min.css\">-->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\">\r\n    <link rel=\"stylesheet\" href=\"960.css\">\r\n<\/head>\r\n<body>\r\n<header>\r\n<div class=\"wrapperHeader\">\r\n    <div class=\"logo\">\r\n        <img src=\"http:\/\/kamil-abzalov.com\/wp-content\/themes\/milleniumSecond\/img\/logo.png\" alt=\"\">\r\n    <\/div>\r\n    <div class=\"phone\">123-45-67<\/div>\r\n    <div class=\"search\">\r\n    <form>\r\n        <input type=\"text\"\/>\r\n        <input type=\"submit\">\r\n    <\/form>\r\n    <\/div>\r\n<\/div>\r\n\r\n<nav id=\"menu\">\r\n<ul>\r\n    <li><a href=\"\/\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/a><\/li>\r\n    <li><a href=\"about.html\">\u041e \u043d\u0430\u0441<\/a>\r\n        <ul class=\"submenu\">\r\n            <li><a href=\"#\">\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430<\/a><\/li>\r\n            <li><a href=\"#\">\u041d\u043e\u0432\u043e\u0441\u0442\u0438<\/a><\/li>\r\n        <\/ul>\r\n    <\/li>\r\n    <li><a href=\"contact.html\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/a><\/li>\r\n<\/ul>\r\n<\/nav>\r\n<\/header>\r\n\r\n<div id=\"content\">\r\n<div class=\"container_12\">\r\n    <div class=\"grid_12 text-center\">\r\n        <h1>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430\u0434\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0441<\/h1>\r\n            \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0441 \u0443\u0434\u0438\u0432\u044f\u0442\r\n    <\/div>\r\n    <div class=\"grid_6\">\r\n        <h2>\u0412\u044b\u0441\u043e\u043a\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae accusantium molestiae porro deserunt fugiat cumque, itaque dignissimos debitis modi neque nihil hic, facilis, repudiandae est ad enim quod, unde.\r\n    <\/div>\r\n    <div class=\"grid_6\">\r\n        <h2>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.\r\n    <\/div>\r\n    <div class=\"grid_4\">\r\n        <h2>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.\r\n    <\/div>\r\n    <div class=\"grid_4\">\r\n        <h2>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.\r\n    <\/div>\r\n    <div class=\"grid_4\">\r\n        <h2>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.\r\n    <\/div>\r\n    <div class=\"grid_6 suffix_1\">\r\n        <h2>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430<\/h2>\r\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.\r\n    <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<footer>\r\n<div class=\"container_12\">\r\n    <div class=\"grid_12\">\r\n        <ul class=\"icons\">\r\n            <li><a href=\"#\"><i class=\"fa fa-vk fa-5x fa-spin\"><\/i><\/a><\/li>\r\n            <li><a href=\"#\"><i class=\"fa fa-facebook fa-5x fa-spin\"><\/i><\/a><\/li>\r\n            <li><a href=\"#\"><i class=\"fa fa-twitter fa-5x fa-spin\"><\/i><\/a><\/li>\r\n            <li><a href=\"#\"><i class=\"fa fa-google-plus fa-5x fa-spin\"><\/i><\/a><\/li>\r\n    <\/ul>\r\n    <\/div>\r\n<\/div>\r\n<\/footer>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\r\n\r\nCSS\r\n\r\n<pre><code>\/*@import url(\"anahit\/anahit.css\");*\/\r\n\r\nhtml, body {\r\n    height: 100%;\r\n}\r\n\r\n#content {\r\n    min-height: 100%;\r\n}\r\n\r\nbody {\r\n    font-family: \"Roboto\", \"Arial\", sans-serif;\r\n    font-size: 16px;\r\n    color: #202020;\r\n}\r\n\r\nheader {\r\n    box-shadow: 0 0 15px 2px #202020;\r\n}\r\n\r\n.wrapperHeader {\r\n    background-color: #7c4dff;\r\n    overflow: hidden;\r\n}\r\n\r\n.logo, .phone, .search {\r\n    float: left;\r\n    width: 33%;\r\n}\r\n\r\n.phone p {\r\n    color: #fff;\r\n    font-size: 25px;\r\n    margin-top: 20px;\r\n}\r\n\r\n.search form {\r\n    margin-top: 25px;\r\n}\r\n\r\nnav {\r\n    width: 100%;\r\n}\r\n\r\n#menu ul {\r\n    padding-top: 0;\r\n    margin: 0;\r\n}\r\n\r\n#menu ul li {\r\n    list-style: none;\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n#menu ul li a {\r\n    color: inherit;\r\n    text-decoration: none;\r\n    font-size: 16px;\r\n    display: block;\r\n    padding: 0 10px;\r\n    line-height: 40px;\r\n}\r\n\r\n#menu ul li:hover .submenu {\r\n    display: block;\r\n}\r\n\r\n.submenu {\r\n    display: none;\r\n    position: absolute;\r\n    background-color: #fff;\r\n    top: 40px;\r\n    padding: 0;\r\n    border: 1px solid #e1e1e1;\r\n}\r\n\r\n.submenu li {\r\n    min-width: 170px;\r\n}\r\n\r\n.submenu li:hover {\r\n    background-color: #7c4dff;\r\n    color: #fff;\r\n}\r\n\r\n.text-center {\r\n    text-align: center;\r\n}\r\n\r\nfooter {\r\n    background-color: #232323;\r\n    height: 200px;\r\n}\r\n\r\n.icons {\r\n    text-align: center;\r\n}\r\n\r\n.icons li{\r\n    display: inline-block;\r\n    list-style:none;\r\n    margin: 0 10px;\r\n}\r\n\r\n.icons li a {\r\n    color: #fff;\r\n}\r\n\r\n.fa-vk:hover {\r\n    color: #4e729a;\r\n}\r\n\r\n.fa-facebook:hover {\r\n    color: #3a5795;\r\n}\r\n\r\n.fa-twitter:hover {\r\n    color: #55acee;\r\n}\r\n\r\n.fa-google-plus:hover {\r\n    color:#dd4b39;\r\n}\r\n\r\n<\/code><\/pre>","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259,243],"class_list":["post-3199","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en","tag-html-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create your first web site. Icon font - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we&#039;ll discuss in this lesson\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create your first web site. Icon font - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we&#039;ll discuss in this lesson\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-07T08:22:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T16:55:48+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Create your first web site. Icon font\" \/>\n<meta name=\"twitter:description\" content=\"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we&#039;ll discuss in this lesson\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"Create your first web site. Icon font\",\"datePublished\":\"2017-08-07T08:22:42+00:00\",\"dateModified\":\"2020-04-08T16:55:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/\"},\"wordCount\":2237,\"commentCount\":0,\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/\",\"name\":\"Create your first web site. Icon font - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-07T08:22:42+00:00\",\"dateModified\":\"2020-04-08T16:55:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we'll discuss in this lesson\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/icon-font\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create your first web site. Icon font\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create your first web site. Icon font - Kamil Abzalov's blog","description":"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we'll discuss in this lesson","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/","og_locale":"en_US","og_type":"article","og_title":"Create your first web site. Icon font - Kamil Abzalov's blog","og_description":"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we'll discuss in this lesson","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-07T08:22:42+00:00","article_modified_time":"2020-04-08T16:55:48+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"Create your first web site. Icon font","twitter_description":"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we'll discuss in this lesson","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"Create your first web site. Icon font","datePublished":"2017-08-07T08:22:42+00:00","dateModified":"2020-04-08T16:55:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/"},"wordCount":2237,"commentCount":0,"keywords":["css","html"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/","name":"Create your first web site. Icon font - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-07T08:22:42+00:00","dateModified":"2020-04-08T16:55:48+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"Icon font font awesome is the most popular icon font. How to use, how to include font awesome in your project? This questions we'll discuss in this lesson","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/icon-font\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"Create your first web site. Icon font"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3199"}],"version-history":[{"count":9,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3199\/revisions"}],"predecessor-version":[{"id":31773,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3199\/revisions\/31773"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}