Announcement

Collapse
No announcement yet.

Using a library Font Awesome

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [vB5] Using a library Font Awesome

    Good evening ... How are you?
    I want to change the icons of the forum shown in the picture:
    Click image for larger version

Name:	icon-1.PNG
Views:	1
Size:	45.3 KB
ID:	4382222

    I want to use a library Font Awesome Such as this site :

    Click image for larger version

Name:	icon-2.PNG
Views:	1
Size:	89.1 KB
ID:	4382223

    How can I do that ؟

  • #2
    If you don't know how to write the CSS yourself the easiest way would be to use https://fortawesome.com/ which is Font Awesome specifically for websites. It allows you to select only the icons you need and writes the CSS for you.

    Caveat: It's not free.

    Comment


    • #3
      Originally posted by In Omnibus View Post
      If you don't know how to write the CSS yourself the easiest way would be to use https://fortawesome.com/ which is Font Awesome specifically for websites. It allows you to select only the icons you need and writes the CSS for you.

      Caveat: It's not free.
      What are the templates responsible for this

      Comment


      • #4
        Originally posted by ABDUR7MAAN View Post

        What are the templates responsible for this
        Bearing in mind this is custom coding and is not supported by vBulletin you would need to add the font awesome HTML in the headinclude template, the fonts themselves in the fonts folder (unless you want to call them from MaxCDN), and the font awesome CSS into the css_additional.css template of each style where you wish to use font awesome. Then you need to use replacement CSS such as the one Glenn Vergara has generously provided here: https://www.vbulletin.com/forum/foru...icons-any-size

        You need to have font awesome CSS which calls two different images, one for new posts and another for old posts.

        If you're not 100% certain of how to go about this I would recommend having a skilled coder do it for you. It is not a simple template edit.

        Comment


        • #5
          If you look at the rabidbadger site in my signature, I am using font awesome icons. The complete custom css for the site is available in the forums.

          You may need to register to see code, I don't remember off the top of my head.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          Vote for your most annoying bugs.
          I am not currently available for vB Messenger Chats.

          Comment


          • #6
            Originally posted by Wayne Luke View Post
            If you look at the rabidbadger site in my signature, I am using font awesome icons. The complete custom css for the site is available in the forums.

            You may need to register to see code, I don't remember off the top of my head.
            Actually that is very nice
            How can I do that

            Comment


          • #7
            If you just want to use fontawesome icons for 10-12 icons in the forum directory list as referenced in the screenshot, it's not worth to include the entire ~30KB fontawesome css file and edit the templates and add the necessary fontawesome "fa-*" CSS classes which may result in template merge conflicts every time you upgrade the forum. In the main nav icons which Wayne Luke did, the fontawesome CSS classes and additional HTML tags can be added in the Phrase Manager without any merge conflicts, but for the icons in the forum directory list, there's no easy way without editing the templates.

            I'm not saying it's not possible to use fontawesome in forum directory icons without editing templates. The solution I'm thinking is actually my recommended solution in this particular case as you don't need to include the entire ~30KB fontawesome css file on your page which means there's no additional load on your page to download a css file.

            AutoLinker-vB5+vBCloud | Topic Starter Ribbon | Blur Replies for Guests | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Events Module | Moderator List | Drag/Drop Upload

            Comment

            Working...
            X