CODEWITHSUNDEEP
html
user12853381
user12853381

Reputation:

How to create a circle with text inside

I'm trying to create a personal website following the code that I got from here. I have no background in HTML and I'm actually only using it to create this website. I was trying to create a circle that is similar to one of the icon's circles in the link above (same radius, colors, location on page, etc), but with the text "CV" inside (since I couldn't find a CV icon logo). Is there a way to do it?
I tried various modifications of the line:

<li><a href="https://github.com/" target="_blank" class="icon solid fa-camera"><span

class="label">CV</span></a></li>

But since I have no HTML background I'm just trying random things that don't make sense or work (like removing "fa-camera"), or stuff along those lines

Update:
I'm attaching the index.html file code from the website's template:

<!DOCTYPE HTML>
<!--
    Aerial by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Aerial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body class="is-preload">
        <div id="wrapper">
            <div id="bg"></div>
            <div id="overlay"></div>
            <div id="main">

                <!-- Header -->
                    <header id="header">
                        <h1>Adam Jensen</h1>
                        <p>Security Chief &nbsp;&bull;&nbsp; Cyborg &nbsp;&bull;&nbsp; Never asked for this</p>
                        <nav>
                            <ul>
                                <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
                                <li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                        </nav>
                    </header>

                <!-- Footer -->
                    <footer id="footer">
                        <span class="copyright">&copy; Untitled. Design: <a href="http://html5up.net">HTML5 UP</a>.</span>
                    </footer>

            </div>
        </div>
        <script>
            window.onload = function() { document.body.classList.remove('is-preload'); }
            window.ontouchmove = function() { return false; }
            window.onorientationchange = function() { document.body.scrollTop = 0; }
        </script>
    </body>
</html>

Update 2:
Changed the index.html file code to:

<!DOCTYPE HTML>
<!--
    Aerial by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Aerial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> 
    <style>.cv:before {contet:"CV";}</style>

    </head>
    <body class="is-preload">
        <div id="wrapper">
            <div id="bg"></div>
            <div id="overlay"></div>
            <div id="main">

                <!-- Header -->
                    <header id="header">
                        <h1>Adam Jensen</h1>
                        <p>Security Chief &nbsp;&bull;&nbsp; Cyborg &nbsp;&bull;&nbsp; Never asked for this</p>
                        <nav>
                            <ul>
                                <li> <a href="#" class="icon brands cv"> <span class="label">Curriculum Vitae</span> </a> </li>
                                <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
                                <li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                        </nav>
                    </header>

                <!-- Footer -->
                    <footer id="footer">
                        <span class="copyright">&copy; Untitled. Design: <a href="http://html5up.net">HTML5 UP</a>.</span>
                    </footer>

            </div>
        </div>
        <script>
            window.onload = function() { document.body.classList.remove('is-preload'); }
            window.ontouchmove = function() { return false; }
            window.onorientationchange = function() { document.body.scrollTop = 0; }
        </script>
    </body>
</html>

Upvotes: 1

Views: 804

Answers (4)

Seabyte
Seabyte

Reputation: 390

My last answer was a cheap option... Here's how to do what you actually want:

<li>
    <a href="#" class="icon brands cv">
        <span class="label">Curriculum Vitae</span>
    </a>
</li>

Style:

.cv:before {
    content:"CV";
}

Upvotes: 1

Seabyte
Seabyte

Reputation: 390

Tried to replicate it:

body {
  background: rgb(115, 201, 230);
  margin: 20px;
}
.radio {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  border: solid 1px white;
  display: inline-block;
  text-decoration: none;
  position: relative;
  border-radius: 100%;
  height: 10rem;
  width: 10rem;
  background: transparent;
  outline: none;
  font-size: 4rem;
  color: white;
  transition: .3s;
}
  .radio:hover {
  transform: scale(1.1);
  background:rgba(255, 255, 255, 0.2);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
</head>
<body>
    <button class="radio cv">CV</button>
</body>
</html>

Upvotes: 2

David_2002
David_2002

Reputation: 84

Here's one way to do it.

<div class="circle"> My Text </div>

.circle{
  border-radius: 50%; 
  border-style:solid; 
  behavior: url(PIE.htc); 
  width: 110px; 
  height: 110px; 
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
}

Keep the width and height the same to keep it a perfect circle.

Upvotes: 0

ihatepineapple
ihatepineapple

Reputation: 65

You could create a small < div > and then with css give the rounded corner property until it's completely round

Upvotes: 0

Related Questions