Magnifying Glass Icon

Developer
Lauren
Size
2,583 Kb
Views
18,216
  1. Magnifying Glass Icon Previews
  2. Magnifying Glass Icon HTML Codes
  3. Magnifying Glass Icon CSS Codes

How do I make an magnifying glass icon?

A magnifying glass icon made using one element and CSS3. Useful for putting in front of search bars.. What is a magnifying glass icon? How do you make a magnifying glass icon? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Magnifying Glass Icon Previews
IQ Test

Magnifying Glass Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Magnifying Glass Icon</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { margin: 0px; padding: 0px; background: #333; width: 100%; height: 100%;
}
html { display: table;
}
body { display: table-cell; text-align: center; vertical-align: middle;
}
i.search { display: inline-block; position: relative; width: 100px; height: 100px;
}
i.search:before { content: ''; display: block; border: 12.5px #FEFEFE solid; border-radius: 100%; width: 54.16666667px; height: 54.16666667px;
}
i.search:after { content: ''; display: block; position: absolute; bottom: 0px; right: 15.71348403px; background: #FEFEFE; width: 16.66666667px; height: 47.14045208px; transform: rotate(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <i class="search"></i> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Magnifying Glass Icon - Script Codes CSS Codes

html,
body { margin: 0px; padding: 0px; background: #333; width: 100%; height: 100%;
}
html { display: table;
}
body { display: table-cell; text-align: center; vertical-align: middle;
}
i.search { display: inline-block; position: relative; width: 100px; height: 100px;
}
i.search:before { content: ''; display: block; border: 12.5px #FEFEFE solid; border-radius: 100%; width: 54.16666667px; height: 54.16666667px;
}
i.search:after { content: ''; display: block; position: absolute; bottom: 0px; right: 15.71348403px; background: #FEFEFE; width: 16.66666667px; height: 47.14045208px; transform: rotate(-45deg);
}
Magnifying Glass Icon - Script Codes
Magnifying Glass Icon - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3
Size 2,583 Kb
Views 18,216
Do you need developer help for Magnifying Glass Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lauren (phantomesse) Script Codes
Name
Scrolling Navigation
Sticky Navbar
Text Search
Mondrian Generator
Multiple Choice Quiz
Simple Dropdown Menu
Which Language Spinner
Messages Inbox
Thumbnail Example
Dissolving Block Art
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!