Wtyczka do ciasteczek na WordPress – przepis idealny

Wtyczka do ciasteczek to podstawa. Jedna z tych rzeczy, o których należy pamiętać po zainstalowaniu WordPress. Ale którą wybrać, gdy wybór jest tak duży? Ja najczęściej korzystam z GDPR Cookie Compliance. Dziś pokażę Ci, jak ją skonfigurować i dopasować jej wygląd do Twojej strony.

GDPR Cookie Compliance ma kilka zalet:

• daje Użytkownikom strony pełną kontrolę nad plikami cookie przechowywanymi na ich komputerze, w tym możliwość cofnięcia wcześniejszej zgody,
• umożliwia wstawienie własnego logo, ustawienia kolorów, czy czcionki,
• dopuszcza wstawienie własnej treści,
• pozwala ustawić baner zgody na pliki cookie u góry lub u dołu strony,
• umożliwi Ci decyzję, które skrypty będą ładowane domyślnie lub tylko wtedy, gdy Użytkownik wyrazi na nie zgodę,
• obejmuje zarówno przyciski „Akceptuj”, jak i „Odrzuć”,
• zawiera link do strony Polityki Prywatności,
• jest responsywna, przyjazna dla SEO oraz kompatybilna z WPML, QTranslate, WP Multilang i Polylang,
• jest dostępna w 11 językach, ale UWAGA! …polskiego akurat nie ma.

Po co powstał ten wpis?

Pewnie wystarczyłoby napisać parę słów o tej wtyczce i na tym skończyć. Zarówno instalacja, jak i konfiguracja nie są zbyt skomplikowane. Jednak dla mnie, ze względu na to, że jako grafik przykładam szczególną wagę do wyglądu, jest to zbyt czasochłonne. Bo choć sama wtyczka wygląda bardzo estetycznie, zawsze próbuję ją dostosować do wyglądu tworzonych stron. I to zajmuje mi dodatkowy czas. Dlatego, aby nieco sobie ten proces usprawnić, przygotowałem ten wpis. A jeśli Ty na tym skorzystasz, będzie mi bardzo miło.

Instalacja

Jak każdą darmową wtyczkę, wystarczy odnaleźć ją w repozytorium WordPress, zainstalować i aktywować.

Konfiguracja

Po zainstalowaniu wtyczki najpierw ją konfigurujemy. Zacznijmy od zakładki BRANDING.

Tu najważniejsze jest, aby dopasować kolory, wybrać logo i ustawić domyślną czcionkę. Ja wybieram Niestandardowa i wpisuję var( --e-global-typography-text-font-family ), Sans-serif, ponieważ Domyślna motywu WordPress zazwyczaj nie działa.

Następnie przechodzimy do zakładki USTAWIENIA BANERA.

Tu należy włączyć baner, określić treść (ale wystarczy, że pobierzesz tłumaczenie udostępnione przeze mnie powyżej), etykietę przycisków, położenie baneru i kolorystykę. Odrzucenie i Przycisk Zamknij pozostawiam zawsze wyłączone.

Zakładkę RUCHOMY PRZYCISK pozostawiam bez zmian. W EKRAN USTAWIEŃ PLIKÓW COOKIE – USTAWIENIA OGÓLNE usuwam jedynie treść w polu Powered by GDPR – Default label.

STRONA WYKORZYSTUJE CIASTECZKA pozostawiam bez zmian. W NIEZBĘDNE PLIKI COOKIE wybieram Opcjonalne (użytkownik wybiera swoje preferencje) 

PLIKI COOKIE INNYCH FIRM to miejsce, gdzie możesz wstawić kody śledzące, np. od Google Analytics i Facebook Pixel.

Podobną funkcję pełni zakładka DODATKOWE PLIKI COOKIE. Natomiast w zakładce POLITYKA COOKIE możesz wstawić link do swojej Polityki Ciasteczek.

Ostylowanie wtyczki do ciasteczek

Po konfiguracji przychodzi pora na dopasowanie wyglądu wtyczki do designu strony. Dodatkowy kod możesz wstawić do Edytora CSS w WordPress.

1. Pasek dolny

Na początek zajmijmy się paskiem dolnym z informacją o ciasteczkach i przyciskiem AKCEPTUJ.

/* --- GDPR --- */

/* PASEK */

#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme {
    background-color: #fff;
    border-top: none;
    box-shadow: 0 0 60px -25px var( --e-global-color-text);
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 15px 30px;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
    padding-left: 0;
    padding-right: 0;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a {
    font-size: var( --e-global-typography-text-font-size );
    line-height: var( --e-global-typography-text-line-height );
    font-weight: var( --e-global-typography-text-font-weight );
    color: var( --e-global-color-text ) !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content span.change-settings-button {
    text-underline-position: under;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
    padding-left: 60px;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
    font-size: var( --e-global-typography-accent-font-size );
    line-height: var( --e-global-typography-accent-line-height );
    color: #fff; /* kolor etykiety */
    font-weight: var( --e-global-typography-acceny-font-weight );
    text-decoration: var( --e-global-typography-accent-text-decoration );
    border-radius: 7px; /* narożniki */
    padding: 15px 30px;
    margin: 0;
    text-transform: var( --e-global-typography-accent-text-transform );
    letter-spacing: var( --e-global-typography-accent-letter-spacing );
    font-family: var(--e-global-typography-accent-font-family );
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
    background-color: var( --e-global-color-accent );
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton.focus-g, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:focus, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:hover, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.focus-g, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:focus, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
    color: #fff;
    background-color: var( --e-global-color-text );
}

2. Ekran ustawień

Teraz przyszła kolej na ekran ustawień.

/* USTAWIENIA */

.gdpr_lightbox {
    background: #403A65bf;
    backdrop-filter: blur(5px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
    max-width: 1200px;
    border-radius: 14px;
    box-shadow: 0 30px 30px -30px var( --e-global-color-text);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close i, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:after, #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:before, .gdpr-icon.moovegdpr-arrow-close:after, .gdpr-icon.moovegdpr-arrow-close:before, i.moovegdpr-arrow-close.moovegdpr-arrow-close:after, i.moovegdpr-arrow-close.moovegdpr-arrow-close:before {
    height: 20px;
    top: calc(50% - 10px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
    width: 33.333%;
    padding: 60px;
    box-shadow: none;
    background: #fff;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder {
    margin-bottom: 60px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li {
    margin-bottom: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected button {
    background-color: #fff;
    border-color: none;
    color: var( --e-global-color-text);    opacity: 1;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button {
    font-weight: var( --e-global-typography-accent-font-weight );
    font-size: var( --e-global-typography-accent-font-size );
    text-decoration: var( --e-global-typography-accent-text-decoration );
    text-transform: var( --e-global-typography-accent-text-transform );
    background-color: transparent;
    border: transparent;
    line-height: var( --e-global-typography-accent-line-height );
    padding: 15px 0px;
    color: var( --e-global-color-text);
    font-family: var(--e-global-typography-accent-font-family );
    white-space: normal;
    opacity: 0.5;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li:hover a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li:hover button {
    color: var( --e-global-color-text );
    opacity: 1;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
    width: 66.667%;
    padding: 60px;
    background-color: #f5f5f5;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main h3.tab-title, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main span.tab-title {
    font-weight: var( --e-global-typography-primary-font-weight );
    font-size: var( --e-global-typography-primary-font-size );
    line-height: var( --e-global-typography-primary-line-height );
    color: var( --e-global-color-text );
    margin-bottom: 30px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
    max-height: calc(100% - 155px);
    padding-right: 0;
    padding-bottom: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content button, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content li, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content p {
    font-weight: var( --e-global-typography-text-font-weight );
    font-size: var( --e-global-typography-text-font-size );
    line-height: var( --e-global-typography-text-line-height );
    margin-bottom: 30px;
    color:  var( --e-global-color-text );
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-status-bar {
    padding: 0;
    margin-right: 0;
    margin-bottom: 30px;
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider:before, #moove_gdpr_cookie_modal .cookie-switch .slider:before, #moove_gdpr_cookie_modal .switch .cookie-slider:before, #moove_gdpr_cookie_modal .switch .slider:before {
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    border: none;
    background-color: #fff;
    box-shadow: none;
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider:after, #moove_gdpr_cookie_modal .cookie-switch .slider:after, #moove_gdpr_cookie_modal .switch .cookie-slider:after, #moove_gdpr_cookie_modal .switch .slider:after {
    font-weight: var( --e-global-typography-accent-font-weight );
    font-size: var( --e-global-typography-accent-font-size );
    line-height: 30px;
    color: red;
    font-family: var(--e-global-typography-accent-font-family );
	  text-transform: var(--e-global-typography-accent-text-transform );
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
    background-color: #f5f5f5;
    border-radius: 14px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
    background-color: #e0e0e0;
}


element.style {
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    margin: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    text-decoration: var(--e-global-typography-accent-text-decoration );
    border-radius: 7px;
    color: #fff;
    padding: 15px 30px;
    border: none;
    text-transform: var(--e-global-typography-accent-text-transform );
    letter-spacing: var(--e-global-typography-accent-letter-spacing );
    font-weight: var(--e-global-typography-accent-font-weight );
    font-size: var(--e-global-typography-accent-font-size );
    line-height: var(--e-global-typography-accent-line-height );
    font-family: var(--e-global-typography-accent-font-family );
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton, .gdpr_cookie_settings_shortcode_content .gdpr-shr-button.button-green {
    background-color: var( --e-global-color-accent );
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton:hover, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton:hover, .gdpr_cookie_settings_shortcode_content .gdpr-shr-button.button-green:hover {
    background-color: var( --e-global-color-text ) !important;
    color: #fff;
}

3. Wersja mobilna

Nie możemy również zapomnieć o wersji mobilnej.

/* WERSJA MOBILNA */

@media (max-width: 767px){
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 30px !important;
}
	
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice {
    padding-left: 0;
    margin-bottom: var( --e-global-typography-text-line-height );
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
    width: 100% !important;
    padding: 30px !important;
    text-align: center;
    height: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
    width: calc(100vw - 60px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder {
    display: none;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li {
    margin: 0 15px !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
    width: 100% !important;
    position: relative;
    padding: 30px !important;
    height: calc(90vh - 91px);
    border-radius: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
    padding-bottom: 0px !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
    padding: 30px 30px 20px !important;
}

#moove_gdpr_cookie_modal .cookie-switch, #moove_gdpr_cookie_modal .switch {
    width: 40px;
    height: 24px;
}
	
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .main-modal-content {
    height: calc(100% - 100px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
    display: none;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
    padding-bottom: 100px !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
    height: auto;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
    flex-direction: column;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton.moove-gdpr-modal-save-settings, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-modal-save-settings, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton.moove-gdpr-modal-allow-all, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-modal-allow-all {
	  width: 100%;
	  margin-bottom: 10px;
}}

Jeśli chcesz, aby wtyczka do ciasteczek miała inne niż domyślne ikony, wystarczy dodać do pliku style.css w Twoim motywie potomnym (ponieważ WordPressowy edytor Dodatkowego CSS blokuje z powodu nie dozwolonego Markup w CSS):

/* --- GDPR WŁASNE IKONY --- */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li a span.gdpr-icon, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button span.gdpr-icon {
    opacity: 0.25;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected a span.gdpr-icon, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected button span.gdpr-icon {
    opacity: 1;
}

/* STRONA WYKORZYSTUJE CIASTECZKA */

.moovegdpr-privacy-overview:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M23.999 12.149c-.049 3.834-1.893 7.223-4.706 9.378-1.993 1.53-4.485 2.449-7.198 2.473-6.464.057-12.051-5.107-12.095-12 3.966 1.066 7.682-1.993 6-6 4.668.655 6.859-2.389 6.077-6 6.724.064 11.999 5.542 11.922 12.149zm-15.576-4.123c-.065 3.393-2.801 5.868-6.182 6.166 1.008 4.489 5.015 7.807 9.759 7.807 5.262 0 9.576-4.072 9.97-9.229.369-4.818-2.755-9.357-7.796-10.534-.277 2.908-2.381 5.357-5.751 5.79zm5.077 8.974c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-5.5-2.853c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm10-2.147c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-5 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm2.5-5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-12.5 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm-1.5-4c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm6-2c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-3.5-1c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z'/></svg>") !important;
}

/* NIEZBĘDNE PLIKI COOKIE */

.moovegdpr-strict-necessary:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z'/></svg>") !important;
}

/* PLIKI COOKIE INNYCH FIRM */

.moovegdpr-3rd-party:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M16 2v7h-2v-5h-12v16h12v-5h2v7h-16v-20h16zm2 9v-4l6 5-6 5v-4h-10v-2h10z'/></svg>") !important;
}

/* DODATKOWE PLIKI COOKIE */

.moovegdpr-advanced:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z'/></svg>") !important;
}

/* POLITYKA COOKIE */

.moovegdpr-policy:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M4 22v-20h16v11.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-7.362zm18-7.614v-14.386h-20v24h10.189c3.163 0 9.811-7.223 9.811-9.614zm-5-1.386h-10v-1h10v1zm0-4h-10v1h10v-1zm0-3h-10v1h10v-1z'/></svg>") !important;
}

Na koniec – bonus