Customise your terminal bash prompt

If you are using OSX this is wonderful because you can customise your command line by adding emoji icons to the bash prompt.

You can find icons inside your Edit menu: Edit -> Emoji & Symbols.

Emoji and Symbols
EDIT -> Emoji and Symbols

 

How to add custom icons to our bash?

So edit your .bash_profile with your favourite editor vim, nano for example, and add the line:

PS1=" "

Open Emoji & Symbol panel and drag and drop your favorite emoji inside quotation marks.

Grag Emoji
Drag emoji inside quotation marks

Depending on terminal settings, nothing may be visible after using drag & drop. Close and reopen you terminal and voilà:

terminal-hbYou can customise terminal bash with some others options:

\d Current date
\t Current time
\h Host name
\# Command number
\u User name
\W Current working directory (ie: Desktop/)
\w Current working directory with full path

This is my favourite customisation:

PS1="🌀  \[email protected]\h\W$ "

What’s yours?

Fontawesome icons inside a palaceholder

This is one way to use fontawesome icons inside a palaceholder:

in the CSS you have to use this code for the class fontAwesome:

.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}

After that in the HTML you have to add the **fontawesome class** first and then the **fontawesome icon code** inside the placeholder:

<input class="fontAwesome" name="emailAddress" type="text" placeholder="[insert-fa-code-here;] insert email address ..." />

and it’s done!!!

You can simply apply the class every time inside your input with the relative code in the placeholder.

And even more, you can use this method by entering the code into a generic element such as a link or a simple text using the same class “fontAwesome” used for the placeholder:

<a class="fontAwesome" href="#">[insert-fa-code-here;] Great job!!!</a>

You can see the result or read the post from my codePen post.

See the Pen FontAwesome and placeholders by Massimiliano Ranauro (@huckbit) on CodePen.