Ways to create a clickable anchor tag without using any text

I am currently designing my own website and incorporating links to various social media platforms using icons. However, I am facing an issue where the links are not clickable.

For a detailed look at my problem, you can refer to this JSFiddle: http://jsfiddle.net/mufeeza/v9s7psf2/

<div class="linkedin icon"><a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank"></a></div>
<div class="github icon"><a href="https://www.github.com/mufeez-amjad" target="_blank"></a></div>
<div class="instagram icon"><a href="http://www.instagram.com/mufeez.a" target="_blank"></a></div>
<div class="twitter icon"><a href="https://www.twitter.com/mufeeza_" target="_blank"></a></div>


.icon {
    background-color: #363636;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
}

.icon a {
    height: 100%;
    width: 100%;
}
.facebook {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=);
    background-size: 25%;
}
.facebook:hover {
    background-color: #3664A2;
}
javascriptjqueryhtmlcss

Answer №1

For a clickable a wrapped in an entire div, consider using display:inline-block

.icon a {
  height: 100%;
  width: 100%;
  display: inline-block;
}

Answer №2

Make a simple update to the CSS code by including display:block

.logo a {
    height: 50%;
    width: 50%;
    display: block;
}

Answer №3

To implement this styling effect, you can utilize the CSS :before pseudo-element along with the content property set to the attr() function. This function takes a parameter that is tied to a custom data-* attribute defined in the HTML.

<div class="facebook icon"><a href="https://www.facebook.com/example/" target="_blank" data-link="facebook"></a></div>
<div class="twitter icon"><a href="https://www.twitter.com/example/" target="_blank" data-link="twitter"></a></div>
<div class="linkedin icon"><a href="https://www.linkedin.com/in/example/" target="_blank" data-link="linkedin"></a></div>
<div class="instagram icon"><a href="https://www.instagram.com/example/" target="_blank" data-link="instagram"></a></div>

a:before {
  content: attr(data-link);
}

You can explore a live example on this jsfiddle link.

Using the CSS :before pseudo-element, you can set the content property to the url() function passing a data URL as a parameter. 

.icon {
  background-color: #363636;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50px;
  width: 50px;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.icon a {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  display: block;
}

.facebook a:before {
  background-image: url(data:image/svg+xml;base64,...); /* Base64 encoded SVG for Facebook */
}

/* Add similar styles for other social media icons */

Explore the interactive demo on this updated jsfiddle link.

Answer №4

To ensure that the icon within the div is fully displayed, include the following CSS rule: display: inline-block; to the selector .icon a.

.icon {
  background-color: #363636;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50px;
  width: 50px;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.icon a {
  height: 100%;
  width: 100%;
  display: inline-block;
}

.facebook {
  //CSS for Facebook icon
}

.twitter {
  //CSS for Twitter icon
}

.linkedin {
  //CSS for LinkedIn icon
}

.instagram {
  //CSS for Instagram icon
}

.github {
  //CSS for Github icon
}
<div class="linkedin icon">
  <a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank"></a>
</div>
<div class="github icon">
  <a href="https://www.github.com/mufeez-amjad" target="_blank"></a>
</div>
<div class="instagram icon">
  <a href="http://www.instagram.com/mufeez.a" target="_blank"></a>
</div>
<div class="twitter icon">
  <a href="https://www.twitter.com/mufeeza_" target="_blank"></a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmit the bound data (using ng-model) to a custom AngularJS directive

/*I am looking to define the maxDate as vmEndDate*/ app.directive('myDatepicker', function ($parse) { return function (scope, element, attrs, controller) { var ngModel = $parse(attrs.ngModel); alert(element.va ...

javascriptangularjs

Create a configuration featuring filter options similar to Notion's functionality

The objective is to create a system that can establish certain constraints, similar to the way Notion handles filter properties. https://i.sstatic.net/plctW.png System A sets up the constraints and System C evaluates them, both using Typescript. However, ...

javascripttypescript

Using Browserify to load the npm-module client-side for thepiratebay

I am currently facing an issue with my node.js server file. It successfully loads my site and runs JavaScript, but I encountered a problem when trying to include tpb = require('thepiratebay'); in the server.js file. Although it works fine in the ...

javascriptnode.jsnpmbrowserify

Webpack2 now transforms sass/scss files into JavaScript rather than CSS during compilation

I've created a webpack script to compile all .scss files into one css file. I decided to use webpack instead of gulp or grunt for simplicity, as it can be configured in a single file. However, I am encountering an issue where scss files are being com ...

javascriptcsswebpacksass

What is the best approach to create a dynamic value from axios response in a reactive object?

I am attempting to retrieve data from the backend (specifically the user role) and store it in a reactive container with Vue: import {reactive} from "vue"; import axios from "axios"; export const store = reactive({ auth: axios.get ...

javascriptvue.jsaxiosvuejs3

Combining Two Dropdown Selections to Create a Unique Name using Angular

I am facing a challenge with 2 dropdown values and input fields, where I want to combine the selected values from the dropdowns into the input field. Below is the HTML code snippet: <div class="form-group"> <label>{{l("RoomType")}}</labe ...

javascriptangulartypescript

Tips for updating server-side variables from the client-side in Next.js

There is a code snippet in api/scraper.js file that I need help with. const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, ...

javascriptnext.jsserver-sideclient-side

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

TypeScript Generic Functions and Type Literals

Everything seems to be running smoothly: type fun = (uid: string) => string const abc: fun = value => value const efg = (callback:fun, value:string) =>callback(value) console.log(efg(abc, "123")) However, when we try to make it generic, we e ...

javascripttypescriptfunctiongenericsliterals

Unable to navigate through bootstrap dropdown items using keyboard shortcuts

I am currently working on a bootstrap dropdown menu that is filled with time zone details. Everything seems to be in order as the dropdown gets populated correctly. However, when I click on it and try to select an item by pressing a key on the keyboard (fo ...

javascripthtmlcssangularjstwitter-bootstrap

Repeating items must be unique; duplicates are not permitted on ng-repeat

The data retrieved from the service request is in JSON format and looks like this: { "entries": [{ "id": 2081, "name": "BM", "niceName": "bodmas" }] }, { "id": 8029, "name": "Mas", "niceName" ...

javascriptjsonangularjsfor-loopangularjs-ng-repeat

Locating elements with CSS Selector in Selenium - A complete guide

Currently, my code is set up to access a website and click on each row in the table which then opens a new window. My goal is to extract one specific piece of information from this new window, but I am struggling to utilize CSS selectors to retrieve the f ...

pythoncssseleniumcss-selectors

The Material UI button shifts to a different row

I need help adjusting the spacing between text and a button on my webpage. Currently, they are too close to each other with no space in between. How can I add some space without causing the button to move to the next line? const useStyles = makeStyles((the ...

javascriptcssreactjstypescriptmaterial-ui

When attempting to compile Angular in production mode, errors may arise such as the Uncaught SyntaxError caused by an Unexpected token '<'

I encountered some errors in the console of my Angular 8 app. When I opened the browser window, it was blank and this error appeared: Uncaught SyntaxError: Unexpected token '<' I tried running different ng build commands such as: ng build --b ...

javascriptnode.jsangularapacheangular-material

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input

MUI Autocomplete causing a never-ending cycle of requests

One of the challenges I'm facing involves an Autocomplete component in my code. Here's a snippet of the code: <Autocomplete filterOptions={(x) => x} options={items} getOptionLabel= ...

javascriptreactjsmaterial-ui

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Submitting information to the server utilizing a POST request through jQuery

What I'm attempting to achieve: I am currently working on sending data to my server using the $.post jQuery shortcut. The issue at hand: It seems that my program is not entering my switch case, possibly due to a problem with sending the action prop ...

javascriptphpjquerypost

Why is Vue Router Navigation Guard throwing an error about exceeding the maximum call stack size?

Encountering a recurring issue of maximum stack size exceeded while implementing the following code for vue router navigation guards per-route: import state from "../vuex-store/state.js"; import Editor from "../views/Editor"; const routes = [ { ...

javascriptvue.jsvue-router