Masukkan kode Google Fonts di Header

Salin + tempel kode HTML di bawah ini di skrip tajuk situs web Anda. Anda dapat menggunakan opsi skrip tajuk di opsi Tema Flatsome.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round" rel="stylesheet">

Masukkan kode Google Fonts di Header

Menempatkan ikon dalam HTML

Sekarang mudah untuk memasukkan ikon ke dalam UX Builder hanya dengan menambahkan satu baris HTML. Pilih ikon favorit Anda melalui Perpustakaan Ikon Material.

<span class="material-icons-outlined"> done </span>

Buat ukuran ikon fleksibel dengan CSS

Jika Anda ingin ukuran ikon mudah disesuaikan, saya sarankan untuk menambahkan kode CSS berikut ke situs web WordPress Anda.

.material-icons, material-icons-outlined, .material-icons-round { font-size: inherit; }

Menggunakan ikon melalui CSS

Sekarang saatnya mempelajari cara mengganti ikon default Flatsome dengan bantuan kode CSS. Di bawah ini Anda akan menemukan contoh cara mengubah ikon menu.

.header .icon-menu:before {
    content: "\e164" !important;
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Leave a Reply

Your email address will not be published. Required fields are marked *