How to use the new Bootstrap Icons v1.10 web font

With the release of Bootstrap Icons v1.10, there is now an easy-to-use web font. Here’s how you can use the new web font in your web pages.

Step 1 – Download the Bootstrap Icons files

Go to icons.getbootstrap.com and download the latest release. There is a download button at the top-right corner of the page.

Step 2 – Install the Bootstrap Icons files

To use the web font on your web site you will need to extract a few files from the ZIP file.

From the fonts folder you will need bootstrap-icons.css and the fonts folder (the one inside the first fonts folder) with the bootstrap-icons.woff and bootstrap-icons.woff2 files.

Copy the CSS file and fonts folder to your website. You can copy the files to your web root folder but typically you would copy them to a folder that contains your other CSS files.

Step 3 – Include the Bootstrap Icons CSS file in your web pages

To be able to use the fonts in your web pages you will need to include the bootstrap-icons CSS file in your HEAD section of your HTML. How this is done will vary on the type of website. If you have simple HTML pages then you would need to add this to each page where you want to use the web font. If you are using a content management system like WordPress then this can be done in a template. If you are not sure use Google to search for how to add a CSS file to your CMS.

To include the CSS file you would add something like this:

<link href="bootstrap-icons.css" rel="stylesheet">

(CSS file is in same folder as the HTML document)

<link href="/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your web root folder)

<link href="/css/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your CSS folder)

Step 4 – Using the Bootstrap Icons web font

To include one of the icons you simply add the web font code that you can find on the Bootstrap Icons website.

For example:

<i class="bi-alarm"></i>

Each icon has it’s own class (eg. bi-alarm), and you can find these by clicking an icon on the Bootstrap Icons website.

Full example:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<link href="bootstrap-icons.css" rel="stylesheet">
	<title>Hello, world!</title>
</head>
<body>
	<div class="container">
		<h1>Bootstrap Icons v1.2 Example</h1>
		<p>
			<i class="bi-alarm"></i>
		</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

Tips to repair Sense screen detached

Sense screen detached as many user experienced.

The key point of repair by youself is find the right glue.

as a display engineer, I aware of the most suitable fix method is TPU adhesive bonding, but it’s not easy to find heating tpu dispenser equipment, so I just want find the easy way to bond the screen.

The answer is A130 structure adhesive,  you  can find it in google, you can get one for 2 dollar.

The glue  come with a needle, so you can easily apply to you frame of watch body. please make sure use a plasitic clip to apply force to body&screen for at least 3 hrs, now your screen secured!

Firstly I completely remove the residue of glue  both on screen and frame.

secondly I use fine cotton swap (with small tip) wet by 99% alcohol to clean both surface of frame and screen

After 2 weeks I glued my watch face, today my sense detached it’s wristband on its own,  the sense fall to the floor, it’s amazing the screen is still secured, that proves the fix for screen detached is successful!

Now we have to deal the second detaching problem, the wristband came off.

I carefully look into the structure of connection, find the root cause for wristband came off is due to the snap fit clearance is a bit large! so you can easly fixed it by stick a piece of paper with  a self-adhesive on the connection area， just like below photo. that’s it!

Continue reading on Fitbit community

Resources

https://www.joesge.com/blogs/fitbit-repair-guides/ho

Unordered list without bullets

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.

For more info, continue reading on Stack Overflow

For more info on CSS box model, continue reading on W3 schools

Difference between an array and an object in JavaScript

What’s the difference between “{}” and “[]” while declaring a JavaScript array? Normally I declare like

var a = [];

What is the meaning of declaring the array as var a = {}

Some of the meaning and explanation between [] and {} are;

var a = {}; is an object-key-value pairs. var a = []; is an array-values stored in sequential indexes. We are not creating array when we are using {}, we are creating object

For more info, continue reading on Stack Overflow