HELP: How to display emojis in color in Titles and Headings

Well, just that. The document’s title line, the headings (from H3 to 1) and the working pages in the sidebar all display alternative, black and white emojis. I use some emojis in references and the colors are very important (since I use them to know the states of my notes). Thank you for your help :slight_smile:

2 Likes

Hello, are you using Win 11?
You can try this code in Custom CSS but they won’t be bold anymore…:sob:

.document-title, .rem-header--1, .rem-header--2, .rem-header--3, .bold,
.concept_rem_type, .font-semibold, 
.css-jATIRb .rem-reference-container,
.css-cniEsE .rem-reference-container,
.hierarchy-editor__tag-bar .rem-reference-container {
	font-weight: 599 !important;
/*text-shadow: 1px 0px 0px black;*/
}

Edit 1: added .bold to the code… Thanks @UMNiK
Edit 2: added .concept_rem_type, .font-semibold
Edit 3: added .css-jATIRb .rem-reference-container for Search Pop-up
Edit 4: added .css-cniEsE .rem-reference-container for Document Table

3 Likes

AFAIK the problem is not the titles or headings, but specifically bold formatting. It is quite annoying, but I’m not sure whether the issue can be solved inside RemNote, as it affects every bolded emoji (on Chrome, at least).
image

3 Likes

Well, it worked… but I do prefer them bolded… I don’t know which is the lesser of the evils now, hahaha. Thanks!

1 Like

@UMNiK … Yeah, It affects any bold emojis with font-weight greater than 600

@Dante_Gaxiola… font-weight of normal text is 400, so i think we can call text with font-weight 599 as bold :grinning_face_with_smiling_eyes:

2 Likes

Add .concept_rem_type to also handle bolding automatically applied to concepts.

2 Likes

I added .text-gray-60 to include the emojis in the selected document in the sidebar.

2 Likes

@UMNiK … I added .concept_rem_type :heart:. I use custom CSS to make Concept not bold so I didn’t notice it

@Dante_Gaxiola … I added .font-sembold instead of .text-gray-60 because it will make all the text of the Sidebar bold… :heart:

2 Likes

I tried that but didn’t work for me, the emojis turn to B&W. :neutral_face:

1 Like

Try deleting the old code. then copy my new code in this post and paste it in Custom CSS

2 Likes

Working like a charm, thanks a lot! :hugs: :pray:

2 Likes

Work very well, thank you so much :raised_hands:
Captura de pantalla 2022-01-09 142323

1 Like

Other alternative is install a icon pack in your browser like this: Twemoji for Chrome - Chrome Web Store

Captura de pantalla 2022-01-09 142452

2 Likes