Skocz do zawartości

Jak wystylizować button z ikonką po lewej stronie Font Awesome


 Udostępnij

Rekomendowane odpowiedzi

Jak inaczej można wystylizować tego buttona by był "bardziej elastyczny"? 

        <button class="button-dollar">
            <div class="button-dollar-left"><i class="fas fa-plus"></i></div>
            <div class="button-dollar-right">Dollar</div>
        
        </button>
.button-dollar{
    display: flex;
    position: relative;
    margin-bottom: 0.03em solid black;
    width: 120px;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border: 0.020rem solid black;
    margin-top: 25px;
    height: 15px;
}

.button-dollar-left{
    border-right: 1px solid black;
    width: 25%;
    text-align: left;
    text-align: center;
    height: 2em;
}

.button-dollar-right{
    width: 75%;
    text-align: left;
    margin-left: 10px;
}
Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
  • Podobna zawartość

    • Cześć. W tym poradniku napiszę jak zmienić ikonki działów z wykorzystaniem frameworka Font Awesome w phpBB2 modified by Przemo.
      Ikonki będą mogły być wyświetlane jako ikony zamiast brzydkich obrazków które kłopotliwie jest zmienić na własne. 
      Jak dodać Font Awesome do phpBB2 by Przemo
      Otwórz: includes/functions_hierarchy.php
      Znajdz: 
                 // send to template             $template->assign_block_vars('catrow', array());             $template->assign_block_vars('catrow.forumrow', array(                 'FORUM_ID' => $id, Przed tym dodaj:
      // Font awesome zamiast ikonek dzialu ( kategorii ) bbHelp.pl             if($count_unread_posts > 0)             {                 $big_folder = '<span class="big_folder_new"><i class="fa fa-folder"></i></span>';             }             else if($data['tree.locked'])             {                 $big_folder = '<span class="big_folder_locked"><i class="fa fa-folder"></i></span>';             }             else {                 $big_folder = '<span class="big_folder"><i class="fa fa-folder"></i></span>';             } Znajdz:
      'CAT_ID' => str_replace(POST_CAT_URL, '', $tree['main'][$athis]), Po tym dodaj:
      'BIG_FOLDER' => $big_folder, Otwórz: templates/*/*.css  Dodaj:
      /* Font awesome zamiast ikonek dzialu ( kategorii )  */ .big_folder { font-size: 22px; color: #666666; } .big_folder_new { font-size: 22px; color: #4e9000; } .big_folder_locked { font-size: 22px; color: #900000; } Otwórz: templates/*/index_box.tpl Znajdz: 
      <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}"> Zamien na:
      {catrow.forumrow.BIG_FOLDER} // dla osób nie posiadajacych zainstalowanego font-awesome Otwórz: templates/*/overall_header.tpl.tpl Znajdz:
      </head> Przed tym dodaj:
      <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> Demo:

    • Witam mam problem z ikonami Font Awesome w AdminCP na IPS Community Suite. Chodzi o to że w ogóle ich nie pokazuje, ,wyświetlają się puste kwadraty, dodam że ikonki wcześniej były widoczne.

    • Witajcie. Dzisiaj opiszę krótki poradnik jak dodać ikony Font Awesome do wysuwanego menu użytkownika w Invision Community (IPS Community Suite).
      Myślę że efekt jest na tyle zadowalający że każdy powinien dodać sobie te ikonki do menu. Według mnie menu użytkownika wygląda o wiele przejrzyściej.
      Wersja skryptu na której dodawałem ikonki to IPS 4.2. Zaznaczę tylko że w nowszych wersjach kod może nie działać w 100% poprawnie, albo w ogóle nie działać ze względu na zmiany w kodzie które mogą się pojawić w nadchodzących wydaniach.
      Jeżeli kod nie będzie działał na waszej wersji oprogramowania, dajcie znać w temacie a postaram się go poprawić.
      Font Awesome w menu użytkownika
      Aby dodać ikonki do menu należy przejść do ACP → Wygląd → Style i szablony → Edytuj HTML i CSS → Zakładka CSS → custom → custom.css. 
      Teraz wklej do pliku następujący kod CSS:
      /* Panel użytkownika */ #elUserLink_menu a:before { font-family: "FontAwesome"; font-size: 14px; font-weight: normal; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; } #elUserLink_menu a[href*="admin"] i { display: none; } #elUserLink_menu a:before { display: inline-block; width: 20px; opacity: 0.7; } #elUserLink_menu a:hover:before { opacity: 1; } /* Profil */ #elUserLink_menu > li[data-menuItem='profile'] > a:before { content: "\f007"; } /* Moje załączniki */ #elUserLink_menu > li[data-menuItem='attachments'] > a:before { content: "\f0c6"; } /* Obserwowana zawartość */ #elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before { content: "\f06e"; } /* Ustawienia konta */ #elUserLink_menu > li[data-menuItem='settings'] > a:before { content: "\f013"; } /* Ignorowani użytkownicy */ #elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before { content: "\f235"; } /* Panel Moderatora */ #elUserLink_menu > li[data-menuItem='modcp'] > a:before { content: "\f132"; } /* Panel Admina */ #elUserLink_menu > li[data-menuItem='admincp'] > a:before { content: "\f023"; margin-right: -3px; } /* Wyloguj */ #elUserLink_menu > li[data-menuItem='signout'] > a:before { content: "\f08b"; } Nie zapomnij aby zapisać swoje zmiany klikając przycisk "Zapisz".
      Poniżej dodaję efekt jak wygląda menu użytkownika z już dodanymi ikonkami Font Awesome

      Całkiem fajnie co? Dajcie znać czy u was wygląda równie fajnie. 
    • W tym poradniku pokażę Wam jak możemy dodać dowolną ikonkę przy wybranym przez nas dziale w IPS Community Suite (Invision Community).
      Wchodzimy na oficjalną stronę Font Awesome i wybieramy ikonkę, którą chcemy dodać przy dziale. Ja przykładowo wybrałem fa-html5. Dla nas ważny jest numer, który podany jest przy "Unicode". W moim przypadku to f13b.

      Przechodzimy do ACP → Wygląd → Style i szablony → Edytuj HTML i CSS → Zakładka CSS → custom → custom.css
      Po przejściu do custom.css musimy dodać odpowiedni kod:
      [data-forumid="2"] .fa-comments:before { content: "\f13b"; } W data-forumid musimy podać ID naszego wybranego działu. W moim przypadku to ID: 2.
      Natomiast w content podajemy numer ikonki, który podany jest na stronie Font Awesome. W moim przypadku to f13b. Na końcu klikamy "Zapisz" i na tym kończymy.
      Aby dowiedzieć się jaki ID posiada nasz dział, należy najechać myszką na nazwę działu. Numer ID znajduje się w odnośniku.
      Przykładowy adres:
      twojeforum.pl/forum/2-nazwa-naszego-forum/ Numer działu znajduje się zaraz po / czyli jest to "2".
      Efekt końcowy:

    • Font Awesome to czcionka z ikonami specjalnie przystosowanymi do użytku na stronach internetowych. Możemy je oczywiście dostosować do własnych potrzeb np. ustawić rozmiar czy kolor za pomocą .CSS. Wersja Font Awesome 4.5.0 posiada 605 ikon!
      Jak dodać Font Awesome na własnej stronie internetowej?
      Pobieramy aktualną dostępną wersję Font Awesome z oficjalnej strony.
      Wysyłamy na serwer pliki - folder css oraz fonts
      W naszym dokumencie .HTML lub innym musimy dodać bezpośrednią ścieżkę dostępu do czcionki Font Awesome
      <link rel="stylesheet" href="css/font-awesome.min.css"> .min oznacza minifikację kodu CSS.
      Content delivery network (ang. CDN)
      Jeżeli chcemy zaoszczędzić trochę miejsca na serwerze to możemy skorzystać z zewnętrznego serwera CDN.
      W sekcji <head> a </head> należy dodać tylko:
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Przykład użycia w kodzie HTML:
      <i class="fa fa-facebook-square"></i> Przykład użycia w kodzie CSS:
      .klasa::before { content: "\f26e"; font-family:'FontAwesome'; }
  • Najnowsze tematy

  • Ostatnio rozwiązane

    • Z tego co widzę to router Vue wymaga SSR (Server-side render), który można stworzyć za pomocą NodeJS wraz z expressem. Prosta odpowiedź znajduje się tutaj: https://stackoverflow.com/questions/43726961/how-to-make-vue-js-app-with-routing-work-in-heroku Sklonowałem repozytorium i zrobiłem deploy za pomocą Vercel. Link: https://covid-19-daily-stats.vercel.app/country/US Vercel tworzy sobie sam środowisko SSR w zależności czego potrzebujemy (wykrywa czy to Vue, React, Angular itp.).
    • @xZANDARMx masz na serwerze index.php? Możesz w htaccess spróbować ustawić: DirectoryIndex index.html  
    • Cześć. Local Security Authority Process to proces systemu Windows, odpowiedzialny za wymuszanie zasad zabezpieczeń w systemie.  Jego pojawienie się wraz z odpaleniem gry jest całkowicie normalne. Sprawdź jednak wagę tego pliku, w Windows 10 powinien on ważyć około 57 KB, jeżeli waży znacznie więcej np. 500 czy nawet powyżej 1 MB to może to oznaczać jakąś infekcję i fakt że nie jest to oryginalny plik Microsoftu. 
×