Notifications
Clear all

[Solved] wpForo textbox control characters are rectangles w/ characters / Question on re-opening a discussion thread

17 Posts
2 Users
2 Reactions
3,327 Views
Posts: 24
Topic starter
(@eviolette)
Eminent Member
Joined: 2 years ago

Hi everyone - I have two questions!

  1. I am having trouble with the Topic textbox in wpForo. The control characters are showing up as boxes with characters in them instead of the correct symbols. Does anyone know what font type these characters are?
  2. @Tutrix assisted me with this previously to fix our social media icons on our footer...but I did not see a way to attach this related question to that original post. Is there a way that we can reply back on a closed thread to reopen it/ ask a related question to the forum?

    Here is a screen capture of what I see: https://www.vealeentrepreneurs.org/screenshot-2023-05-22-at-10-37-12-entrepreneurship-ecosystem-questions/

16 Replies
Tutrix
Posts: 1477
(@tutrix)
Noble Member
Joined: 5 years ago

Did you activate it?

Dashboard > wpforo > Settings > General Settings > Miscellaneous > Font-Awesome Lib > Sitewide

if not then activate Sitewide

2 Replies
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix I did.....and I just found your post answer to @goodfella from 2022 with the answer I needed. I added the CSS code you recommended on that thread and it worked:

i.mce-i-aligncenter, i.mce-i-alignjustify, i.mce-i-alignleft, i.mce-i-alignright, i.mce-i-backcolor, i.mce-i-blockquote, i.mce-i-bold, i.mce-i-bullist, i.mce-i-charmap, i.mce-i-dashicon, i.mce-i-dfw, i.mce-i-forecolor, i.mce-i-fullscreen, i.mce-i-help, i.mce-i-hr, i.mce-i-indent, i.mce-i-italic, i.mce-i-link, i.mce-i-ltr, i.mce-i-numlist, i.mce-i-outdent, i.mce-i-pastetext, i.mce-i-pasteword, i.mce-i-redo, i.mce-i-remove, i.mce-i-removeformat, i.mce-i-spellchecker, i.mce-i-strikethrough, i.mce-i-underline, i.mce-i-undo, i.mce-i-unlink, i.mce-i-wp-media-library, i.mce-i-wp_adv, i.mce-i-wp_code, i.mce-i-wp_fullscreen, i.mce-i-wp_help, i.mce-i-wp_more, i.mce-i-wp_page {
font: normal 20px/1 dashicons !important;
}
.mce-ico {
font-family: tinymce !important;
}
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix

Now only the bookmark icon shows up now as a rectangle with icons in it. I have no idea what that font would be. Thanks for your help!

Posts: 24
Topic starter
(@eviolette)
Eminent Member
Joined: 2 years ago

Now only the bookmark icon shows up now as a rectangle with icons in it

Tutrix
Posts: 1477
(@tutrix)
Noble Member
Joined: 5 years ago

add to the css

i.mce-i-bookmark

 

1 Reply
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix no luck- I'm not sure what I entered incorrectly! I added the code you sent to a block of others that were already in there:

i.mce-i-aligncenter, i.mce-i-alignjustify, i.mce-i-alignleft, i.mce-i-alignright, i.mce-i-backcolor, i.mce-i-blockquote, i.mce-i-bold, i.mce-i-bullist, i.mce-i-charmap, i.mce-i-dashicon, i.mce-i-dfw, i.mce-i-forecolor, i.mce-i-fullscreen, i.mce-i-help, i.mce-i-hr, i.mce-i-indent, i.mce-i-italic, i.mce-i-link, i.mce-i-ltr, i.mce-i-numlist, i.mce-i-outdent, i.mce-i-pastetext, i.mce-i-pasteword, i.mce-i-redo, i.mce-i-remove, i.mce-i-removeformat, i.mce-i-spellchecker, i.mce-i-strikethrough, i.mce-i-underline, i.mce-i-undo, i.mce-i-unlink, i.mce-i-wp-media-library, i.mce-i-wp_adv, i.mce-i-wp_code, i.mce-i-wp_fullscreen, i.mce-i-wp_help, i.mce-i-wp_more, i.mce-i-wp_page, i.mce-i-bookmark, i.fa-solid.fa-folder-tree {
font: normal 20px/1 dashicons !important;

Tutrix
Posts: 1477
(@tutrix)
Noble Member
Joined: 5 years ago

@eviolette looks like there is no bookmark icon as dashicon

Developer Resources: Dashicons

use a suitable one
maybe "pressthis

9 Replies
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix I tried to add coding for pressthis using the same format for coding as the dashicons and broke everything....so I started over from scratch

This is what I tried - thanks for your help! I apologize for multiple questions on this - thanks for being patient with me while I learn!

i.mce-i-bookmark,  {
font: normal 20px/1 pressthis !important;

Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1477

@eviolette 

enable guests post to test so that the editor is visible

(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix ok! I just turned that on

Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1477

@eviolette 

try

#wpforo #wpforo-wrap .fa-bookmark:before {
  content: "\f157" !important;
  font: 400 20px/1 dashicons !important;
}
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix It came up showing the code instead of the icon

Screen capture:

Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1477

@eviolette 

As a guest I do not see this icon, so I can only guess from the visible icons how the formatting must be overwritten

(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix I turned on visibility for guests to see the forum. I'm unsure of what to try next with coding. Thank you for helping me with this!!!

Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1477

@eviolette 

As a guest I can't set a bookmark, so as already written I don't see this icon

(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@tutrix

Thank you for your infinite patience with me! I finally figured out that our Font Awesome font was out of date. I reinstalled everything and added the following codes:

#wpforo #wpforo-wrap .fa, #wpforo #wpforo-wrap .fab, #wpforo #wpforo-wrap .far, #wpforo #wpforo-wrap .fa-bookmark:before {
font-family: "Font Awesome 6 Free" !important;
}
#wpforo #wpforo-wrap .fa, #wpforo #wpforo-wrap .fab, #wpforo #wpforo-wrap .far, #wpforo #wpforo-wrap .fa-folder-tree:before {
font-family: "Font Awesome 6 Free" !important;
}

 

Everything works finally - thank you for your guidance!