{"id":2351,"date":"2020-08-25T13:10:21","date_gmt":"2020-08-25T13:10:21","guid":{"rendered":"https:\/\/elfsight.com\/fr\/?page_id=2351"},"modified":"2020-10-21T15:39:18","modified_gmt":"2020-10-21T15:39:18","slug":"examples","status":"publish","type":"page","link":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/","title":{"rendered":"Social Media Icons &#8211; examples"},"content":{"rendered":"\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 1: Ic\u00f4nes sociales<\/h3><div class=\"application-examples-item-description\">C'est l'une des variantes les plus courantes du widget. Les ic\u00f4nes sont en cercle et dispos\u00e9es sur une ligne horizontale - gr\u00e2ce \u00e0 la disposition Inline du widget. Bien que vous puissiez choisir n'importe quelle couleur d'arri\u00e8re-plan, ici les couleurs d'origine du support sont enregistr\u00e9es et leurs symboles sont blancs. C'est une bonne variante pour une zone de contenu de n'importe quel site Web.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=a39387ab-d9ea-4e51-b176-0238eafc914d&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 2: Ic\u00f4nes flottantes<\/h3><div class=\"application-examples-item-description\">Si vous choisissez une mise en page flottante, le widget se d\u00e9placera le long de la page, en suivant le d\u00e9filement et restera donc toujours \u00e0 port\u00e9e de main. Ce type de disposition peut \u00eatre align\u00e9 sur n'importe quel c\u00f4t\u00e9 de l'\u00e9cran et sera r\u00e9organis\u00e9 en horizontal, si vous choisissez l'alignement central. Les ic\u00f4nes ici sont carr\u00e9es avec le style par d\u00e9faut.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=4ce734ab-d0a4-47f3-8dd5-f6f544a84c56&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 3: Ic\u00f4nes noires<\/h3><div class=\"application-examples-item-description\">Ces ic\u00f4nes sont absolument uniques gr\u00e2ce \u00e0 la solution de couleur noir et blanc. Les couleurs de l'arri\u00e8re-plan et le symbole du support ont \u00e9t\u00e9 modifi\u00e9s dans les param\u00e8tres. Les ic\u00f4nes sont en ligne et align\u00e9es au centre. Il existe \u00e9galement un effet d'animation de vol en survol.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe application-examples-item-iframe-fixed-height\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=02aa9da1-726c-4323-a731-82b97e0249ac&padding=140px+40px+0\" width=\"100%\" height=\"350\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-cta-create\">\n                    <div class=\"application-cta-create-bg\">\n                        <div class=\"application-cta-create-bg-left\"><\/div>\n\n                        <div class=\"application-cta-create-bg-right\">\n                            <img decoding=\"async\" src=\"https:\/\/elfsight.com\/fr\/wp-content\/themes\/elfsight\/frontend\/assets\/img\/application-cta-create.jpg\" alt=\"Commencez par cr\u00e9er votre widget\">\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"application-cta-create-content inner\">\n                        <div class=\"application-cta-create-content-inner\">\n                            <div class=\"application-cta-create-content-icon\">\n                                <svg viewBox=\"0 0 25 25\" width=\"100%\" height=\"100%\">\n                                    <use xlink:href=\"#icon-settings\"><\/use>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"application-cta-create-content-title\">Commencez par cr\u00e9er votre widget<\/div>\n\n                            <div class=\"application-cta-create-content-text\">Vite. Facile. Pas de codage.<\/div>\n\n                            <a class=\"application-cta-create-content-button button-48 button-has-right-icon button-black button\" href=\"\">\n                                <span class=\"button-label\">Cr\u00e9er un widget<\/span>\n\n                                <svg class=\"button-icon\">\n                                    <use xlink:href=\"#icon-arrow-link\"><\/use>\n                                <\/svg>\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 4: Ic\u00f4nes blanches<\/h3><div class=\"application-examples-item-description\">Pour adapter le widget au concept g\u00e9n\u00e9ral du style, vous pouvez changer totalement son apparence. Ici, les ic\u00f4nes ont un fond blanc et les symboles du support sauvegardent les couleurs natives pour sauvegarder l'authenticit\u00e9. La forme arrondie et la largeur personnalis\u00e9e les ont rendus \u00e9pur\u00e9s et minimalistes.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=6ac81eff-028d-46dd-91ea-f13a8e0f2286&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 5: Nettoyer les ic\u00f4nes<\/h3><div class=\"application-examples-item-description\">Gr\u00e2ce au style de symbole appliqu\u00e9 \u00e0 ce widget, les ic\u00f4nes sont affich\u00e9es sans l'arri\u00e8re-plan. Les ic\u00f4nes des m\u00e9dias ont sauv\u00e9 les couleurs natives et elles semblent minimalistes et propres. L'animation de zoom appara\u00eet au survol, et vous pouvez \u00e9galement choisir d'autres variantes d'animation.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=384a754c-c101-4c7d-9ea6-06850e7ba6af&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 6: Plus d'ic\u00f4nes<\/h3><div class=\"application-examples-item-description\">Vous pouvez afficher n'importe quelle quantit\u00e9 d'ic\u00f4nes sur la page, et cet exemple prouve qu'elles auront fi\u00e8re allure, quel que soit le nombre. Il y a 8 ic\u00f4nes dispos\u00e9es sur une ligne et align\u00e9es au centre. Tous ont des couleurs natives d'arri\u00e8re-plan et de symboles et affichent une animation de rebond lorsqu'ils sont survol\u00e9s.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=28d8a218-1153-4b07-88b8-2debb5da9b3d&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 7: Messagers<\/h3><div class=\"application-examples-item-description\">TCet exemple montre comment vous pouvez diriger les utilisateurs vers vos cha\u00eenes dans les messagers directement \u00e0 partir du site Web. Les ic\u00f4nes de cet exemple ont une taille moyenne de 32 pixels et ont la forme d'un cercle. Les couleurs originales des messagers sont enregistr\u00e9es en arri\u00e8re-plan et les symboles eux-m\u00eames sont blancs. Ces options, ainsi que d'autres param\u00e8tres de personnalisation peuvent \u00eatre facilement modifi\u00e9s dans l'\u00e9diteur.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=ba6fb5e7-354a-4852-83ee-9dc55cb498b1&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":2342,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-examples.php","meta":{"footnotes":""},"class_list":["post-2351","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TOP 7 des ic\u00f4nes de m\u00e9dias sociaux sur des exemples (Showcase)<\/title>\n<meta name=\"description\" content=\"TOP 7 exemples d&#039;ic\u00f4nes sociales de site Web: mod\u00e8le classique, design minimaliste, ic\u00f4nes flottantes ou universelles et autres mod\u00e8les pour votre site Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TOP 7 des ic\u00f4nes de m\u00e9dias sociaux sur des exemples (Showcase)\" \/>\n<meta property=\"og:description\" content=\"TOP 7 exemples d&#039;ic\u00f4nes sociales de site Web: mod\u00e8le classique, design minimaliste, ic\u00f4nes flottantes ou universelles et autres mod\u00e8les pour votre site Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight FR\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-21T15:39:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TOP 7 des ic\u00f4nes de m\u00e9dias sociaux sur des exemples (Showcase)","description":"TOP 7 exemples d'ic\u00f4nes sociales de site Web: mod\u00e8le classique, design minimaliste, ic\u00f4nes flottantes ou universelles et autres mod\u00e8les pour votre site Web.","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:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/","og_locale":"fr_FR","og_type":"article","og_title":"TOP 7 des ic\u00f4nes de m\u00e9dias sociaux sur des exemples (Showcase)","og_description":"TOP 7 exemples d'ic\u00f4nes sociales de site Web: mod\u00e8le classique, design minimaliste, ic\u00f4nes flottantes ou universelles et autres mod\u00e8les pour votre site Web.","og_url":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/","og_site_name":"Elfsight FR","article_modified_time":"2020-10-21T15:39:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/","url":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/","name":"TOP 7 des ic\u00f4nes de m\u00e9dias sociaux sur des exemples (Showcase)","isPartOf":{"@id":"https:\/\/elfsight.com\/fr\/#website"},"datePublished":"2020-08-25T13:10:21+00:00","dateModified":"2020-10-21T15:39:18+00:00","description":"TOP 7 exemples d'ic\u00f4nes sociales de site Web: mod\u00e8le classique, design minimaliste, ic\u00f4nes flottantes ou universelles et autres mod\u00e8les pour votre site Web.","breadcrumb":{"@id":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Social Media Icons","item":"https:\/\/elfsight.com\/fr\/social-media-icons-widget\/"},{"@type":"ListItem","position":3,"name":"Social Media Icons &#8211; examples"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/fr\/#website","url":"https:\/\/elfsight.com\/fr\/","name":"Elfsight FR","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"2341","h1":"","h1_caption":"","application_category":[],"applications_title":"","applications_request_title":"","applications_request_button_text":"","hero_text":"","hero_video":"","hero_video_schema_markup":"","selling_points_title":"","selling_points_caption":"","selling_points":[],"selling_points_cta_text":"","features_title":"","features":"","ed_cta_examples_text":"","ed_cta_examples_hidden":"","ed_cta_demo_text":"","ed_cta_demo_hidden":"","why_caption":"","why_editor_title":"","why_editor_text":"","why_team_title":"","why_team_text":"","why_service_title":"","why_service_text":"","template_catalog_visible":"","template_catalog_title":"","template_catalog_text":"","template_catalog_categories_visible":"","demo_title":"","demo_caption":"","default_faq_hidden":"","app_template_category":[],"platform":"","template_public_id":"","codecanyon_url":"","codecanyon_item_id":"","codecanyon_price":"","pricing_caption":"","pricing_elfsight_apps_hide_column":"","pricing_elfsight_apps_url":"","pricing_codecanyon_price_caption":"","integration_category":[],"integration_request_title":"","integration_request_cta":"","integration_platform":"","integrations":[],"platform_category":[],"video_schema_markup":"","price":"","trial":"","benefits":[],"button_url":"","button_target_blank":"","button_nofollow":"","attributes":[],"tags":[],"tags_disable_links":"","hide_more_platforms":"","video_object":"","demo_hide_cta":"","demo_hide_cloud_options":"","pricing_title":"","pricing":[],"related_apps_title":"","related_apps_hidden":""},"_links":{"self":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/2351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/comments?post=2351"}],"version-history":[{"count":4,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/2351\/revisions"}],"predecessor-version":[{"id":2355,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/2351\/revisions\/2355"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/2342"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/media?parent=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}