• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Change posts and views into fa-icons

Scheduled Pinned Locked Moved General Discussion
9 Posts 3 Posters 3.2k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • MJM Offline
    MJM Offline
    MJ
    wrote on last edited by
    #1

    We use the dutch language and the words posts and views are very long in our language (Onderwerpen and Berichten) because of this the text is overlapping.

    https://i.imgur.com/hazWvvS.png

    Is it possible to use font awesome icons instead of text?
    And if it's possible how can I change it?

    1 Reply Last reply
    0
  • MJM Offline
    MJM Offline
    MJ
    wrote on last edited by MJ
    #2

    bump ^^
    ....

    1 Reply Last reply
    0
  • MJM Offline
    MJM Offline
    MJ
    wrote on last edited by
    #3

    bump 2

    can sombody help me please?

    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #4

    Sure, this looks like an issue with widget-essentials...

    I don't know if there's a way to detect when text overruns their containers, and I'm assuming you don't want the word truncated with ellipses.

    I'd just use client-side javascript, and replace those words on the fly...

    $(window).on('action:widgets.loaded', function () {
      // do something here...
    });
    
    MJM 1 Reply Last reply
    1
  • MJM Offline
    MJM Offline
    MJ
    replied to julian on last edited by
    #5

    @julian said in Change posts and views into fa-icons:

    $(window).on('action:widgets.loaded', function () {
    // do something here...
    });

    must I do this in CSS ?

    MegaM 1 Reply Last reply
    0
  • MegaM Offline
    MegaM Offline
    Aza Noriega Community Rep
    replied to MJ on last edited by Mega
    #6

    @MJ CSS? Nah. Just execute some JS
    For example:

    $(window).on('action:widgets.loaded', function () {
    	$('li[component="categories/category"]')
    	.add('li[component="category/topic"]')
    	.find('.stats > small')
    	.each(function (i, el) {
    		var
    			$small = $(el),
    			text = $small.text(),
    			$icon,
    			iconClass
    
    		if (text === 'Topics')
    			iconClass = 'fa-group'
    		else if (text === 'Posts')
    			iconClass = 'fa-group'
    		else if (text === 'Views')
    			iconClass = 'fa-group'
    		else
    			return
    
    		$icon = $('<i class="fa fa-fw ' + iconClass + '"></i>')
    		$small.replaceWith($icon)
    	})
    });
    

    P.S. Actually, the best way to change something in a theme - is to fork the theme and make whatever changes you want in your own repository. But you'll have to keep track of any new changes from the original theme repository, resolve merge conflicts, etc. This way is a hard way. The example I've provided above is the easy one.

    MJM 1 Reply Last reply
    1
  • MJM Offline
    MJM Offline
    MJ
    replied to Aza Noriega on last edited by
    #7

    @Mega where do I put the code?

    1 Reply Last reply
    0
  • MJM Offline
    MJM Offline
    MJ
    wrote on last edited by
    #8

    @Mega how do I use the code and where must I put it?

    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #9

    You can do this in the custom HTML section... wrap it in <script></script>

    An HTML widget might also work.

    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development