Thursday 1 August 2019

Font awesome CSS

To display this little icon





we can use the font awesome css.

It looks extremely simple to use. Here is an example from w3school.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-home"></i>

The problem arises when I copy the css file locally. What I get looks...





It is because the css file alone is not enough to render the image. I also need to save the image files locally.

Where to find the image files? If we hit

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css


@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

We need to download
  • fontawesome-webfont.eot
  • fontawesome-webfont.woff2
  • fontawesome-webfont.woff
  • fontawesome-webfont.ttf
  • fontawesome-webfont.svg  
Replace the css/font-awesome.css with fonts/<image-file-names>, e.g

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot

Then put these image files in the fonts folder at the same level with css folder


How to delete a cookie

Naively, the code looks like this

for (Cookie cookie : request.getCookies()) {
    if (StringUtils.equalsIgnoreCase(cookie.getName(), "cookie-name")) {
        cookie.setValue("");
        cookie.setMaxAge(0);
        response.addCookie(cookie);
    }
}

Unfortunately, it doesn't work because a cookie is identified by its name, domain, and path. But we don't change the domain or path, do we? Actually the browser will send only name=value in the HTTP Cookie header.

Other attributes (secure, domain, path, expiration) are only available for cookies that we set into the response yourself. They are used to create the Set-Cookie response headers.

Therefore cookie.getDomain() and cookie.getPath() always return null.

The solution is explicitly set domain and path


for (Cookie cookie : request.getCookies()) {
    if (StringUtils.equalsIgnoreCase(cookie.getName(), "cookie-name")) {
     cookie.setDomain("localhost");
     cookie.setPath("/");
        cookie.setValue("");
        cookie.setMaxAge(0);
        response.addCookie(cookie);
    }
}