Viewing How do I use Font Awesome?
How do I use Font Awesome?
|
User: Steve F. 5 years ago
|
|
|
Hello everyone, I've watched the tutorial video on this, but Font Awesome's site has changed, and now there seems to be conflicting instructions. On their current site, it gives a line of code to paste into the header, no download for code needed? So, after copying this strip of code on the clipboard, do I: Place it in the header code panel on individual pages On the publishing preferences page, which suggests it put the code on every page? Or, do you put it on both? I'm using the icons on a master page at present. Another thing I don't get is that these are vector scaleable graphics - so why does the tutorial specify different sizes? How do you change the colour? Hopelessly confused here as I'm allergic to code and I have no idea what I'm doing. Any advice or help would be most welcome! Many thanks in advance. Last edit 5 years ago |
|
|
User: Roddy 5 years ago
|
|
|
If you put the code into the box in the Site Publishing Settings page it will be available for every page of the site. Otherwise, you would need to paste it into the head code box in the Page inspector of every page that has Font Awesome icons. Another way is to use the CDN link. Icons actually load faster using this rather than the JS file. To do this, paste this into the Head Code box... <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> These icons are web fonts so you can style them like any other item. The easiest way if you are not into code would be to use an inline style like this... <i class="fa fa-home" style="font-size:40px;color:#FFFF00;background-color:#000000;border:2px solid #FF0000;padding:5px;border-radius:5px;"></i> Paste the above into an HTML Snippet widget and experiment with different values for the style properties. You can get the hex number for any color by opening it in the RGB Sliders section of the color window. If you can't be bothered with that, you can use color names. For example, in the styles of the above example, the icon color is red - #FF0000. You can use the color name - red - instead. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Steve F. 5 years ago
|
|
|
Hello Roddy, Many thanks for getting back to me. I have just replied but can find no trace of it, sorry if it appears twice. I followed your instructions up to the second section of code. I managed to get the house to appear, and then tried to adjust the code. I wanted just the house in white, no border or additional colours. I managed to delete those, and increased the size of the icon ok, but it has remained black. Here is the code I tried: <i class="fa fa-home" style="font-size:80px;color:#000000"></i> This clearly isn't right, so what have I got wrong? Also, where did you get the house code from? I need different icons to this so need to look. Thanks so much, Steve. |
|
|
User: Roddy 5 years ago
|
|
|
White is #FFFFFF or you can use the color name ... <i class="fa fa-home" style="font-size:80px;color:white;background:black"></i> Get the icon names fro the Font Awesome Cheatsheet. Here's the code for some glasses to help you look for icons! <i class="fa fa-glasses" style="font-size:40px;color:yellow;background:blue;padding:5px"></i> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Steve F. 5 years ago
|
|
|
Hello Roddy, My deepest thanks again, you have certainly shone a light into a very dark corner as far as I am concerned. Using the original line of code you gave me, and just changing the name, colour, and size have given me everything I need it seems. This is a major fix for me. I have no idea how I came to have 000000 for the colour white! |
|
| Post Reply |
| You must login or signup to post. |