Mastodawn

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

#CodePen #FontAwesome #VueJs #WebAwesome

Stefan Apr 29

#11ty is an awesome open source static site generator I use and support for a while now.

The project recently got part of the #fontawesome universe. I understand @zachleat ’s goal of the transition was to keep the project sustianable and alive for many years ahead.

I supported Build Awesome on the kickstarter campaign and you can be aweome too

➡️ https://www.kickstarter.com/projects/fontawesome/build-awesome-pro

Build Awesome Pro

A better way to build web sites. Fast, flexible, and built to last.

Kickstarter

Data Science Apr 26

Add some swag to your ggplots, with fontawesome symbols and colors: https://nrennie.rbind.io/blog/adding-social-media-icons-ggplot2/ #rstats #ggplot #fontawesome #ggtext

Adding social media icons to charts with {ggplot2} – Nicola Rennie

Adding social media icons to your data visualisation is a great, concise way to put your name on your work, and make it easy for people to find your profile from your work. This blog post explains how to add social media icons to {ggplot2} charts.

Nicola Rennie

Fabian ¯\_(ツ)_/¯Apr 25

#FontAwesome recently added the OSM logo 🥳

https://fontawesome.com/icons/openstreetmap?f=brands&s=solid

Thanks to Pierre-Yves Beaudouin
@Pyb (original toot: https://mamot.fr/@Pyb/116399632549553786) and WeeklyOSM for bringing this to my attention!

#OpenStreetMap

Openstreetmap Icon | Font Awesome

Openstreetmap icon in the Brands style. Available now in Font Awesome.

Joe Steinbring

Apr 17

is trying to add more custom emoji to the #GoToSocial

instance. Yes, those are all #FontAwesome

icons, and yes, I am a paying user.

Pierre-Yves Beaudouin Apr 13

#OpenStreetMap a droit à une icône #FontAwesome https://fontawesome.com/search?p=2&f=brands

Joe Steinbring

Mar 28

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Use Web Awesome Components in CodePen 2.0 Editor

YouTube

Efstathios Iosifidis, DVM Mar 6

🆕 Νέο plugin για το @ONLYOFFICE Icons! 🖼️

Προσθέστε χιλιάδες διανυσματικά εικονίδια από τη βιβλιοθήκη Font Awesome στα έγγραφά σας. Πλήρως προσαρμόσιμο (χρώμα, μέγεθος, στυλ) και φυσικά 100% δωρεάν. 💾✨

Ιδανικό για όσους θέλουν να συνδυάσουν την παραγωγικότητα με τη δημιουργικότητα.

🔗 Οδηγός εγκατάστασης & χρήσης 👉 https://www.onlyoffice.com/blog/el/2026/03/new-icons-plugin-for-onlyoffice

#FOSS #ONLYOFFICE #OpenSource #FontAwesome #Tech #CreativeCommons #Plugins

Πρόσθετο Icons: Πάνω από 1000 Εικονίδια | ONLYOFFICE Blog

Εισάγετε δωρεάν προσαρμόσιμα εικονίδια Font Awesome στα έγγραφα, υπολογιστικά φύλλα & παρουσιάσεις ONLYOFFICE. Αλλάξτε χρώμα, μέγεθος, στυλ. Οδηγός λήψης.

ONLYOFFICE Blog